jQuery 工具工具提示支持定义哪些事件触发工具提示。
您不需要自己处理点击事件。
编辑：更新了脚本。单击链接始终将工具提示移动到第二个元素。
这里是script
var tt = $("h1").tooltip({
events:{def:'click, click'},
effect: "slide",
tip: '.tooltip' ,
position: "bottom center",
api: true,
delay: 30000
});
$("#ht").click(function() {
tt.hide();
$("#_2").tooltip().show();
});
整个脚本
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:14px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
cursor:pointer;
}
</style>
</head>
<body>
<h1 id="_1">John</h1>
<h1 id="_2">Mary</h1>
<h1 id="_3">Dan</h1>
<h1 id="_4">Paul</h1>
<h1 id="_5">Kim</h1>
<a id="ht" href="javascript:void()">Click here</a>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body>
</html>
<script>
var tt = $("h1").tooltip({
events:{def:'click, click'},
effect: "toggle",
tip: '.tooltip' ,
position: "bottom center",
api: true,
delay: 30000
});
$("#ht").click(function() {
tt.hide();
setTimeout(function(){$("#_2").tooltip().show();}, 500);
});
</script>
