js代码
//导入js
/***
* 鼠标悬浮气泡提示Jquery插件
*
*
***/
$(function() {
$.fn.manhua_hoverTips = function(options) {
var defaults = {
position : "t", //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)
value : 23 //小箭头偏离左边和上边的位置
};
var options = $.extend(defaults,options);
var bid = parseInt(Math.random()*100000);
var $this = $(this);
$("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');
var $btip = $("#btip"+bid);
var $btipClose = $("#btipc"+bid);
var offset,h ,w ;
var timer;
$this.die().live("mousemove",function(){
clearInterval(timer);
offset = $(this).offset();
h = $(this).height();
w = $(this).width();
$(".cont").html($(this).attr("tips"));
switch(options.position){
case "t" ://当它是上面的时候
$(".triangle-t").css('left',options.value);
$btip.css({ "left":offset.left , "top":offset.top+h+14 }).show();
break;
case "b" ://当它是下面的时候
$(".triangle-b").css('left',options.value);
$btip.css({ "left":offset.left , "top":offset.top-h-7-$btip.height() }).show();
break;
case "l" ://当它是左边的时候
$(".triangle-l").css('top',options.value);
$btip.css({ "left":offset.left+w+10 , "top":offset.top+h/2-7-options.value }).show();
break;
case "r" ://当它是右边的时候
$(".triangle-r").css('top',options.value);
$btip.css({ "left":offset.left-20-$btip.width() , "top":offset.top+h/2-7-options.value }).show();
break;
}
});
$this.live("mouseout",function(){
timer = setInterval(function (){
$btip.hide();
}, 1000);
});
$btip.live("mousemove",function(){
clearInterval(window.timer);
$btip.show();
});
$btip.live("mouseout",function(){
$btip.hide();
});
$btipClose.live("click",function(e){
$btip.hide();
});
}
});
//页面js
$(function (){
$("#tt").manhua_hoverTips();//使用默认参数,所以不用调用最简洁
$("#tl").manhua_hoverTips({position : "l"});//改变了显示的位置参数
$("#tr").manhua_hoverTips({position : "r"});//改变了显示的位置参数
$("#tb").manhua_hoverTips({position : "b"});//改变了显示的位置参数
});
css代码
body {
background: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.docBubble {position:absolute;max-width:240px; text-align:left;text-align:left;z-index:100; display:none;}
.docBubble a{ margin-left:0;}
.docBubble .icon{ background:none;}
.docBubble .title a {text-decoration: none;}
.docBubble .tl,.docBubble .tr,.docBubble .bl,.docBubble .inner,.docBubble .triangle-t,.docBubble .triangle-b,.docBubble .close{ background-image:url(../images/manhua_bubbletips.png);_background-image:url(../images/manhua_bubbletips_ie6.png); }
.docBubble .tl{ float:left; background-position:-20px 0; }
.docBubble .tr{ position:absolute;right:-12px; top:0;width:12px; height:12px; background-position:100% 0; }
.docBubble .bl{ position:absolute;left:0; bottom:-12px; width:12px; height:12px; background-position:-20px 100%; }
.docBubble .inner{ position: relative;left:12px; width:220px; margin:12px 0 -12px 0; max-width:220px; background-position:100% 100%; padding:0 12px 12px 2px; _padding-bottom:12px; }
.docBubble .triangle-t{ position:absolute; z-index:2; top:-7px; width:15px; height:8px; overflow:hidden; }
.docBubble .triangle-b{ position:absolute; bottom:-18px; z-index:2; width:15px; height:11px; overflow:hidden; background-position:0 -10px; }
.docBubble .triangle-l{ position:absolute; left:-10px; z-index:2; top:15px; width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_l.png) no-repeat;_background-image:url(../images/manhua_bubbletips_l_ie6.png) no-repeat; }
.docBubble .triangle-r{ position:absolute; right:-19px; z-index:2; top:15px; width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_r.png) no-repeat;_background-image:url(../images/manhua_bubbletips_r_ie6.png) no-repeat; }
.docBubble .triangle-t,.docBubble .triangle-b{ right:20px;}
.docBubble .close{ position:absolute; z-index:1; top:10px; right:2px; width:9px; height:9px; text-indent:-99em; overflow:hidden; background-position:0 -25px; cursor:pointer;}
.docBubble .inner .icon{ float:left; padding: 2px 0;}
.docBubble .inner .icon img{ margin-right:10px; }
.docBubble .inner .cont{ overflow:hidden; zoom:1; line-height:20px;}
.docBubble .inner .title{ margin:0 0 2px 0; font-size:12px;font-weight:bold;}
.docBubble .inner .lk-btn{ text-align:right;}
html代码
<center>
<br /><br /><br /><br /><br />
<br />
<br />
<br />
<br />
<br /><a id="tb" class="tag" tips="要提示的信息">JquerySchool-测试上边</a>
<br />
<br />
<br />
<br />
<br />
<br />
<a id="tr" class="tag" href="#" tips="要提示的信息">JquerySchool-测试左边</a><br />
<br />
<br />
<br />
<br />
<br />
<a id="tl" class="tag" href="#" tips="要提示的信息">JquerySchool-测试右边</a><br />
<br />
<br />
<br />
<br />
<br />
<a id="tt" class="tag" href="#" tips="要提示的信息">JquerySchool-测试下边</a>
</center><br />
注:记得导jquery库。