使用jQuery实现自定义tooltip

来源：互联网发布：马士兵java怎么样编辑：程序博客网时间：2024/06/09 21:55

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自定义Title</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script><script tyep='text/javascript'>$(document).ready(function(){ //自定义title内容var x = 10;var y = 20;$("a.tooltip").mouseover(function(e){this.myTitle = this.title;this.title = "";var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";$("body").append(tooltip);$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");}).mouseout(function(){this.title = this.myTitle;$("#tooltip").remove();}).mousemove(function(e){$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});});});  </script><style type="text/css">#tooltip { position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } </style></head><body><div class="newTitle" style="margin-top:25px;"><p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示 1.</a></p><p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示 2.</a></p><p><a href="#" title="这是自带的提示1.">自带提示 1.</a></p><p><a href="#" title="这是自带的提示2.">自带提示 2.</a></p></div> </body></html>

以上是简单的实现方法，还有其它插件可以使用，例如：http://www.jq22.com/jquery-info340     DarkTooltip

0 0