jquery 툴팁 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 189회 작성일 13-01-17 14:30본문
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#tooltip_outer{
position:absolute;
display:none;
z-index:9999;
background:#ccc;
border-radius:8px;
opacity:0.5;
}
#tooltip_inner{
position:relative;
padding:20px;
}
.tooltip{
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function initTooltip(){
if(!$('.tooltip').length){
return;
}
$('body').append('<div id=tooltip_outer><div id=tooltip_inner></div></div>');
var $tt_title,$tt_alt;
var $tt = $('#tooltip_outer');
var $tt_i = $('#tooltip_inner');
$('.tooltip').hover(function(){//올려놓았을떄
if($(this).attr('title')){
$tt_title = $(this).attr('title');
}
$tt_i.html($tt_title);
$tt.show();
},function(){//벗어났을때
$tt.hide();
}).mousemove(function(e){
var $e_x = e.pageX;
var $e_y = e.pageY;
var $tt_x = $tt.outerWidth();//툴팁의 x좌표?
var $tt_y = $tt.outerHeight();//툴팁의 y좌표?
//본문 좌표
var $bd_x = $('body').outerWidth();
var $bd_y = $('body').outerHeight();
$tt.css({'top':$e_y + $tt_y > $bd_y ? $e_y-$tt_y:$e_y, //마우스의 y좌표+툴팁의y좌표가 본문의 y좌표보다크다면 top=마우스의y-툴팁의y 아니라면 그냥 마우스의 y좌표
'left':$e_x+$tt_x+20>$bd_x?$e_x-$tt_x-10:$e_x+15});//마우스의 x좌표+툴팁의x+20이 본문x보다 크다면 left=마우스스의x-10 아니라면 마우스의x좌표+15
});
}
$(document).ready(function(){
initTooltip();
});
</script>
</head>
<body>
<span class="tooltip" title="안녕하세요 이것은 툴팁이에요">마우스를 올려노아보세염</span>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
