JQuery简单工具提示效果
我一直试图找到jquery工具提示效果，但找不到我需要的，所以我开始编写/修改最简单/最接近的示例。单击页面上的任何位置都应隐藏当前打开的工具提示，除非单击其他工具提示，在这种情况下，当前打开的工具提示将关闭，新工具提示将打开 目前，由于工具提示的显示存在问题，因此单击页面上的任何位置都不会产生任何效果。单击一个提示可以很好地显示，单击下一个提示将关闭第一个提示并打开第二个提示，但在此之后，当单击另一个工具提示时，将显示一个空白框 为什么会这样JQuery简单工具提示效果,jquery,html,css,tooltip,Jquery,Html,Css,Tooltip,我一直试图找到jquery工具提示效果，但找不到我需要的，所以我开始编写/修改最简单/最接近的示例。单击页面上的任何位置都应隐藏当前打开的工具提示，除非单击其他工具提示，在这种情况下，当前打开的工具提示将关闭，新工具提示将打开 目前，由于工具提示的显示存在问题，因此单击页面上的任何位置都不会产生任何效果。单击一个提示可以很好地显示，单击下一个提示将关闭第一个提示并打开第二个提示，但在此之后，当单击另一个工具提示时，将显示一个空白框 为什么会这样 <!DOCTYPE html> <
<!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>
.工具提示{
显示：无；
填充物：5px10px；
背景色：#e5f4fe；
边框：5a5959 1px实心；
位置：绝对位置；
z指数：9999；
颜色：#0C；
宽度：100px；
高度：50px；
}
$（窗口）。加载（函数（）{
$（文档）.ready（函数（）{
$（'body'）。追加（''）；
var-tip；
$（'a[标题]）。单击（功能（e）{
//显示提示
tip=$（this.attr（'title'）；//tip=此标题
$（this.attr（'title'，''）；//空标题
$（'.tooltip'）.fadeTo（300，0.9）.children（'.tipBody'）.html（提示）；//淡入工具提示并填充.tipBody
//设定位置
$（'.tooltip'）.css（'top'，e.pageY）；
$（'.tooltip'）.css（'left'，e.pageX）；
});
});
});
$('body').on('click', function (e) {
if (!$(e.target).hasClass('tooltip')) {
// hide your tooltip
}
});