jQuery的位置和悬停工具提示问题答案

【问题标题】：jQuery's tooltip issue with position and hoverjQuery的位置和悬停工具提示问题
【发布时间】：2010-08-11 11:06:08
【问题描述】：

我有以下代码示例（见下文）。我的问题是，在我离开光标后，工具提示没有显示“旧”文本 - 有什么想法吗？

<style type="text/css">
#tooltip {
    position: absolute;
    background: #FFF;
    display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<div id="tooltip"></div>');
    var tt = $('#tooltip');
    $('a.tooltip').each(function(){
        $(this).data('title', this.title).attr('title', '');
    }).hover(function(){
        var t = $(this), o = t.offset();
        tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast');        
    },
    function(){
        tt.css({display: 'none'});
    });
});
</script>
</head>
<body>

    <a href="#" class="tooltip" title="VeryLongTextMoreTextVeryLongText">VeryLongText...VeryLongText</a>

【问题讨论】：

标签： jquery tooltip hover

【解决方案1】：

问题是鼠标进入<a>但然后它在工具提示元素上，所以你需要拆分悬停，像这样：

$('body').append('<div id="tooltip"></div>');
var tt = $('#tooltip');
$('a.tooltip').each(function(){
    $(this).data('title', this.title).attr('title', '');
}).mouseenter(function(){
    var t = $(this), o = t.offset();
    tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast');
});
tt.mouseleave(function() {
  $(this).stop().hide();
});

You can give it a try here，由于鼠标悬停在<a> 上，因此将.mouseeenter() 添加到其中。但是，既然你已经在#tooltip 上位于<a> 之上，要隐藏它，你需要#tooltip 本身上的.mouseleave()。

目前发生的事情是它开始于.fadeIn()，但一旦它这样做了mouseleave 事件就会发生（因为#tooltip 不是一个孩子），所以display: none; 被触发（你可以使用.hide() 这里）。 display:none; 确实发生了，但是下一个淡入淡出的间隔只是反转它，所以你最终得到一个淡入元素。为防止在上面的 mouseleave 处理程序中出现这种情况，我们添加了 .stop() 以阻止此悬停进一步褪色。

【讨论】：

感谢 Nick :) - 现在可以正常工作