Cluetip 다운로드 : http://plugins.jquery.com/files/cluetip-1.0.4.zip
말풍선, 호버박스, 툴박스, 툴팁 등등 이름이 다양하지만.. 양키들이 주로 쓰는 것이 툴팁이니
여기서도 툴팁이라고 부르겠습니다.
보통.. "Web2.0스럽다" 싶은 사이트들을 들르다보면 만나는 경우가 많은데요
간단히 말해서 하이퍼링크 위에 마우스를 갔다댔을때 레이어로 만든 무언가를 보여주는 것이 툴팁이고
이를 간편하게 구현할 수 있도록 도와주는 라이브러리가 바로 위에 링크한 Cluetip 이라는 물건입니다.
기본구조는 아래와 같습니다.
<body>부분
<p><a class="tips" href="#" rel="tips.html">마우스올려봐</a></p>
<p><a class="tips2" href="#" title="|클루팁조아요|우왕굳">마우스올려봐</a></p>
<p><a class="tips2" href="#" title="|클루팁조아요|우왕굳">마우스올려봐</a></p>
<head>부분
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();
$('a.tips2').cluetip({
splitTitle: '|',
showTitle: false
});
});
</script>
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();
$('a.tips2').cluetip({
splitTitle: '|',
showTitle: false
});
});
</script>
첫번째 tips 의 경우 마우스를 올리면 red="tips.html" <- 이 내용을 ajax로 불러와서 보여주라는 것을 말하고..
두번째 tips2 의 경우 마우스를 올리면 title="|클루팁조아요|우왕굳" <- 이 것을 | 기호 단위로 잘라서 내용을
만들라는 명령과 함께, 원래 나타나야 할 title태그는 보여주지 말라(false) 고 지정하는 것을 말합니다.
클루팁이 적용된 데모사례들은 아래 링크에서 확인해 볼 수 있고요,
http://plugins.learningjquery.com/cluetip/demo/
외국사이트이다보니 툴팁을 불러오는게 약간의 "로딩" 이 생기지만.. 국내 아무개 서버에서든 클루팁을 쓸때는
로딩이 거의 없다고 봐도 될만큼의 빠른 속도를 자랑하기도 합니다.
(물론 무엇을 연결해다가 보여주느냐에 따른 부하 차이는 있겠죠..;;)
