我一直在努力寻找一个jquery tooltip effect但是找不到我需要的，所以我开始写/修改最简单/最接近的例子。单击页面上的任意位置应隐藏当前打开的工具提示，除非单击不同的工具提示，在这种情况下，当前打开的工具提示将关闭并打开新的工具提示。
目前点击页面上的任何地方都没有任何作用，因为工具提示的显示存在问题。单击一个提示可以正常显示，单击下一个将关闭第一个并打开第二个，但在此之后单击另一个工具提示时会显示一个空白框。
为什么会这样？
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-1.6.2.js'></script>
<style type='text/css'>
.tooltip{
display:none;
padding:5px 10px;
background-color:#e5f4fe;
border:#5a5959 1px solid;
position:absolute;
z-index:9999;
color:#0c0c0c;
width:100px;
height:50px;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
$('body').append('<div class="tooltip"><div class="tipBody"></div></div>');
var tip;
$('a[title]').click(function(e) {
//display tip
tip = $(this).attr('title'); // tip = this title
$(this).attr('title',''); // empty title
$('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip ); // fade tooltip and populate .tipBody
//set position
$('.tooltip').css('top', e.pageY);
$('.tooltip').css('left', e.pageX);
});
});
});
</script>
</head>
<body>
<a title="message1" class="printbtn" href="#">tip1</a>
<a title="message2" class="printbtn" href="#">tip2</a>
</body>
</html>
最佳答案
您需要使用事件对象为正文的点击添加一个事件监听器，检查目标是否是您的事件工具提示，否则关闭工具提示。
$('body').on('click', function (e) {
if (!$(e.target).hasClass('tooltip')) {
// hide your tooltip
}
});
如果你点击任何地方，文本将被隐藏，如果你点击文本本身，什么也不会发生。
这也可以修改，以便您检查的目标是触发工具提示的链接，而不是工具提示本身。
关于jQuery 简单工具提示效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12487011/