jquery实现冒泡提示

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库。