Javascript 改进工具提示代码
我正在尝试构建一个可悬停的Jquery工具提示。 当我将鼠标悬停在某个元素上并停留时，应该会显示此工具提示 如果我选择将鼠标悬停在工具提示本身上，请将鼠标悬停。 仅当我将鼠标悬停在远离原始对象的位置时，工具提示才会消失 元素或从工具提示正文中删除 根据我找到的一个例子，我成功地创建了这种行为，但是 由于我是Jquery新手，我很高兴听到您对Jquery的评论 改进功能 守则：Javascript 改进工具提示代码,javascript,jquery,tooltip,Javascript,Jquery,Tooltip,我正在尝试构建一个可悬停的Jquery工具提示。 当我将鼠标悬停在某个元素上并停留时，应该会显示此工具提示 如果我选择将鼠标悬停在工具提示本身上，请将鼠标悬停。 仅当我将鼠标悬停在远离原始对象的位置时，工具提示才会消失 元素或从工具提示正文中删除 根据我找到的一个例子，我成功地创建了这种行为，但是 由于我是Jquery新手，我很高兴听到您对Jquery的评论 改进功能 守则： #工具提示{ 位置：绝对位置； 边框：1px实心#333； 背景：#f7f5d1； 填充物：2px 5px； 颜色：#
#工具提示{
位置：绝对位置；
边框：1px实心#333；
背景：#f7f5d1；
填充物：2px 5px；
颜色：#333；
显示：无；
文本对齐：左对齐；
}
jQuery.fn.extend({
“工具提示”：函数（文本）{
xOffset=10；
yOffset=20；
var=这个；
$（此）.mouseover（函数（e）{
t=文本；
$（“body”）.append（“+this.t+”）；
$（“#工具提示”）
.css（'位置'，'绝对'）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
});
$（this）.mouseout（函数（）{
think.hide_ff=setTimeout（'$（“#工具提示”）.hidetooltip（）'，1000）；
$（“#工具提示”）.hover（函数（）{
clearTimeout（即隐藏）；
},
函数（）{
$（“#工具提示”）.hidetooltip（）
});
//$（“#工具提示”）.hidetooltip（）
});
$（this）.mousemove（函数（e）{
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});
},
“hidetooltip”：函数（）
{
var=这个；
$（this.remove（）；
如果（那就藏起来）
{
clearTimeout（即隐藏）；
}
}
});
$（文档）.ready（函数（）{
$（“#fff”）.tooltip（$（'#tooltip_share_text'）.html（））；
});
有两件事最让我烦恼：
GordiJQuery有一个。如果您想自己动手，我相信您可以通过查看他们所做的工作来获得想法。我不确定您是否仍然对此感兴趣。。。差不多一年了 但是我稍微修改了你的代码：
- 我去掉了hidetooltip（额外的扩展）
- 使用that.hide\u ff可以，所以我没有更改它
- 工具提示会在链接的末尾弹出，不会随着鼠标移动-我认为它看起来更干净
- 切换了xOffset和yOffset
- 注释掉了原始的mousemove代码，因此如果您不喜欢，可以将其更改回去
<!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>
<script src="jquery-1.2.6.min.js"></script>
<style>
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript">
jQuery.fn.extend({
'tooltip': function(text){
xOffset = 10;
yOffset = 20;
var that = this;
$(this).mouseover(function(e){
this.t = text;
$("body").append("<div id='tooltip'>"+ this.t +"</div>");
$("#tooltip")
.css('position', 'absolute')
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
$(this).mouseout(function(){
that.hide_ff = setTimeout('$("#tooltip").hidetooltip()', 1000);
$("#tooltip").hover(function(){
clearTimeout (that.hide_ff);
},
function(){
$("#tooltip").hidetooltip()
});
//$("#tooltip").hidetooltip()
});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
},
'hidetooltip': function()
{
var that = this;
$(this).remove();
if (that.hide_ff)
{
clearTimeout (that.hide_ff);
}
}
});
</script>
<a id="fff">ToolTip</a>
<div id="tooltip_share_text" style="display:none">
<div style="width: 100px;">
This is a Tooltip.
<br/>
<a href="javascript:void(0)" onclick="alert('boo')"> Click Me</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#fff").tooltip($('#tooltip_share_text').html());
});
</script>
</body>
</html>