第一个例子：
html:
<h1>Example of simple jQuery tooltip<span class="toolTip" title="This is a simple tooltip made with jQuery"> </span></h1>
js:
$(document).ready(function() { $('.toolTip').hover( function() { this.tip = this.title; $(this).append( '<div class="toolTipWrapper">' +'<div class="toolTipTop"></div>' +'<div class="toolTipMid">' +this.tip +'</div>' +'<div class="toolTipBtm"></div>' +'</div>' ); this.title = ""; this.width = $(this).width(); $(this).find('.toolTipWrapper').css({left:this.width-22}) $('.toolTipWrapper').fadeIn(300); }, function() { $('.toolTipWrapper').fadeOut(100); $(this).children().remove(); this.title = this.tip; } ); });
第二个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery鼠标悬停动态显示提示文字或者图片</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style> *{ margin: 0; padding: 0;} body{ padding: 200px; font-size: 12px; background-color: #f0f0f0;} .tooltips{ border-width: 1px; border-style: solid; position: absolute; display: none; border-radius: 3px; opacity: 0; filter:alpha( opacity = 0) ; z-index: 999;} .tooltips p.content{ padding: 5px; } .tooltips .triangle-front,.tooltips .triangle-back{ width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: solid; position: absolute; border-color: transparent ; top: 100%; left: 50%; margin-left: -8px;} .tooltips .triangle-back{ margin-top: -1px;} .yellow{ border-color: #c7c08d; background-color: #fffac3;} .yellow .triangle-front{ border-top-color: #c7c08d;} .yellow .triangle-back{ border-top-color: #fffac3;} a{ padding: 5px; margin-right: 20px; border: 1px solid #cc00dd;} </style> </head> <body> <style> .baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;} </style> <div class="baidu_ads"> <script type="text/javascript"> var sogou_ad_id=395091; var sogou_ad_height=90; var sogou_ad_width=960; </script> <script type='text/javascript' src='http://images.sohu.com/cs/jsfile/js/c.js'></script> </div> <span style="display:none;"> <script src="http://s94.cnzz.com/stat.php?id=4106941&web_id=4106941" language="JavaScript"></script> </span><center> <a href="javascript:" id="ahover" tooltips="这里是hover的tips">鼠标滑过自动显示</a> <a href="javascript:" id="aclick" tooltips="<img src='lanrenzhijia.png'>">点击显示提示信息</a> </center> <script> $.fn.extend({ hoverTips : function (){ var self = $(this); var sw = self.get(0).switch; if( !sw ) { sw = true; var content = self.attr("tooltips"); var htmlDom = $("<div class='tooltips'>") .addClass("yellow") .html("<p class='content'></p>" + "<p class='triangle-front'></p>" + "<p class='triangle-back'></p>"); htmlDom.find("p.content").html( content ); } self.on("mouseover",function(){ $("body").append( htmlDom ); var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2; var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width")); htmlDom.css({"left":left,"top":top - 10,"display":"block"}); htmlDom.stop().animate({ "top" : top ,"opacity" : 1},300); }); self.on("mouseout",function(){ var top = parseInt(htmlDom.css("top")); htmlDom.stop().animate({ "top" : top - 10 ,"opacity" : 0},300,function(){ htmlDom.remove(); sw = false; }); }); }, clickTips : function (){ var self = $(this); var sw = self.get(0).switch; if( !sw ) { sw = true; var content = self.attr("tooltips"); var htmlDom = $("<div class='tooltips'>") .addClass("yellow") .html("<p class='content'></p>" + "<p class='triangle-front'></p>" + "<p class='triangle-back'></p>"); htmlDom.find("p.content").html( content ); } self.on("click",function(){ $("body").append( htmlDom ); var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2; var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width")); htmlDom.css({"left":left,"top":top - 10,"display":"block"}); htmlDom.stop().animate({ "top" : top ,"opacity" : 1},300, function(){ setTimeout(function(){ htmlDom.stop().animate({"top":top - 10 ,"opacity" : 0},300,function(){ htmlDom.remove(); sw = false; }) },2000) }); }) } }); $("#ahover").hoverTips(); $("#aclick").clickTips(); </script> </body> </html>
第三个例子：