CSS Simple Tooltips w/ CSS & jQuery
페이지 정보
작성자 관리자 댓글 0건 조회 15,037회 작성일 12-04-22 18:21본문
Warning: Undefined array key "insert_body" in /data/in-best-com/theme/basic/skin/board/basic/view.skin.php on line 146

Your Link Key Word This will show up in the tooltip
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
양반은 물에 빠져도 개헤엄 안 치고, 선비는 얼어 죽어도 곁불 안 쬔다 !! 나는 나 ^^ 주접 떨지않고, 당당하게 살다 ... 간다 ~
댓글목록
등록된 댓글이 없습니다.







