Hello everyone, I wrote a small code for a tooltip

$(function(){ var links = $('a[title]'); links.hover( function(){ var current = $(this); var tooltipText = current.attr('title'); $('div class="tooltip"/div').hide().appendTo(current).text(tooltipText) .fadeIn(500); },function(){ $('div.tooltip').fadeOut(500, function(){ $(this).remove(); }); }); });

One problem arose: the title attribute has not gone away and the browser displays the default tooltip also when you hover over the link. How can I transfer the contents of the second function's tooltipText variable so that the title attribute can be created again? And install it with attr ('title', tooltipText)

The html code is the easiest - just a link with the title attribute, there will be a lot of such links on the page.

    3 answers 3

     $(function(){ var links = $('a[title]'); links.hover(function(){ var current = $(this); var tooltipText = current.attr('title'); $('<div class="tooltip"></div>').hide().appendTo(current).text(tooltipText).fadeIn(500); current.removeAttr('title'); }, function(){ $('.tooltip', this).fadeOut(500, function(){ $(this.parentNode).attr('title', this.innerHTML); $(this).remove(); }); }); });

    It'll do? Although here I would rewrite some moments on pure js ...

    • Yes, your concept is very good, right because we do not need to save and transmit anything, we can pull out the contents of the diva and shove it in our title. Respect - makregistr
     $(function(){ var links = $('a[title]'); $('a[title]').each(function() { $(this).attr('rel', $(this).attr('title')); $(this).removeAttr('title') }).hover( function(){ var tooltipText = $(this).attr('rel'); $('<div class="tooltip"></div>').hide().appendTo($(this)).text(tooltipText) .fadeIn(500).attr('rel', tooltipText); },function(){ $('div.tooltip').fadeOut(500, function(){ $(this).remove(); }); }); });

    Maybe something like that?

    • We simply overwrite the contents of the title in the attribute rel, and how to make the hover title at the time saved to a variable and be deleted, and when the mouse leaves the link area, the second function would receive this parameter and restore the title attribute again. At the same time, thank you very much, the code is fully working. - makregistr

    This is how I changed the script (now all on jquery) and closed my ticket. Thank you all very much!

     $(function(){ var links = $('a[title]'); links.hover( function(){ var current = $(this); var tooltipText = current.attr('title'); $('<div class="tooltip"></div>').hide().appendTo(current).text(tooltipText).fadeIn(500); current.removeAttr('title'); },function(){ var tooltipDiv = $('div.tooltip'); var tooltipText = tooltipDiv.text(); $(this).attr('title', tooltipText); tooltipDiv.fadeOut(500, function(){ $(this).remove(); }); }); });