<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

<script>

$(function(){

$("span.tooltip").css({

   opacity:"0.9",

   position:"absolute",

   display:"none"

});

$("a").mouseover(function(){

   $("span.tooltip").fadeIn();

}).mouseout(function(){

   $("span.tooltip").fadeOut();

}).mousemove(function(e){

   $("span.tooltip").css({

"top":e.pageY+10+"px",

"left":e.pageX+10+"px"

   });

});

});

</script>

<a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> <span class="tooltip">툴팁 내용<br /><strong>

주황색으로 된 부분이 툴팁 나오게 하는 부분이고요.

검정색 박스가 팁이에요.

e라는 부분이 툴팁을 자동으로 이동시키는 부분이에요.  

마우스 오버 이벤트에서 마우스에 좌표를 가져와요.