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

时间:2010-08-11 11:06:09

标签: jquery tooltip hover

我有以下代码示例(见下文)。我的问题是,在我离开光标后,工具提示没有显示“旧”文本 - 任何想法?

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

1 个答案:

答案 0 :(得分:0)

问题是鼠标在工具提示元素上输入<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不是孩子),所以{{1触发(你可以在这里使用.hide())。 display: none; 会发生,但淡入淡出的下一个间隔会反转它,因此您最终会得到一个淡入元素。为防止在上面的display:none;处理程序中,我们添加了.stop()以阻止此悬停的进一步淡化。