我正在尝试构建可悬停的 Jquery 工具提示。 当我将鼠标悬停在某个元素上并停留时，应该会出现此工具提示 如果我也选择将鼠标悬停在工具提示本身上。 只有当我将鼠标悬停在远离原始工具的地方时，工具提示才会消失 元素或来自工具提示正文。
根据我发现的一个例子，我设法创造了这种行为，但是 由于我是 Jquery 的新手，我很高兴听到您对 改进功能。
代码:
<!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>
有两件事最困扰我:
- 我需要用 2 个函数(工具提示和 hidetooltip)，我想只用一个来实现相同的行为 扩展，但我没有成功完成此任务。
- 我对“that.hide_ff”的使用似乎不对。一次 同样，我认为这个变量应该属于一个“工具提示”对象，但是 如果我没记错的话，它附加到 Jquery 对象本身。
此外，我很乐意听到任何其他改进......
提前致谢， 戈尔迪
最佳答案
有一个tooltip plugin对于 JQuery。如果您更愿意自己动手，我相信您可以通过查看他们所做的事情来获得灵感。
关于javascript - 改进工具提示代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/254558/