마우스 오버 위치에 따라 툴팁 생성 및 자동 이동
<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라는 부분이 툴팁을 자동으로 이동시키는 부분이에요.
마우스 오버 이벤트에서 마우스에 좌표를 가져와요.
|
댓글을 작성하시려면 로그인이 필요합니다.