Home/ Questions/Q 991461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:06:44+00:00

I have the following code example (see below). My problem is that the tooltip

  • 0

I have the following code example (see below). My problem is that the tooltip doesn’t show the “old” text after I go away with the cursor – any ideas?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is the mouse enter the <a> but then it’s on the tooltip element, so you need to split the hover, like this:

    $('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, since the mouse over occurs on the <a>, add the .mouseeenter() to it. But, since you’re then over the #tooltip on top of the <a>, to hide it you need the .mouseleave() on the #tooltip itself.

    What’s happening currently is it starts to .fadeIn(), but as soon as it does so the mouseleave event happens (since #tooltip isn’t a child), so the display: none; is triggered (you can use .hide() here). The display:none; does happen, but the next interval of the fade just reverses it, so you end up with a faded-in element. To prevent that in the mouseleave handler above, we’ve added .stop() to stop further fading for this hover.

    • 0