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

问题描述：

我有下面的代码示例（见下文）。我的问题是，在我用光标离开后，工具提示没有显示“旧”文本 - 有什么想法？jQuery的工具提示问题与位置和悬停

<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>

答

的问题是鼠标进入<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()。但是，因为您在<a>之上，因此您在#tooltip之上，要隐藏它，您需要在#tooltip本身上的.mouseleave()。

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

谢谢尼克:) - 现在工作得很好 – Jens 2010-08-11 11:24:50

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

相关推荐