Grow your CSS skills. Land your dream job.

Remove Content on Mouseleave

  • # December 14, 2011 at 11:51 pm

    I hate this. How do I remove the content from $('acronym').text(); for second action and so on and so on? I’m not a javascript expert T_T

    http://jsfiddle.net/tovic/SgNU6/

    # December 15, 2011 at 9:51 am

    Try this (demo):

    $(function() {
    $('acronym').hover(function() {
    var tip = $(this).attr('data-tooltip') || $(this).attr('title');
    var tiptip = $(this).text();
    $(this).attr({
    'title': '',
    'data-tooltip': tip
    });
    $(this).append('

    ' + tiptip + '

    ' + tip + '
    ');
    $('#tooltip').fadeIn();
    }, function() {
    $('#tooltip').remove();
    });
    });

    Basically we store the tooltip in a new attribute “data-tooltip” instead of saving it back into the title. The first line should work like this: the first time it sees it, there is no “data-tooltip” so it is undefined, so the “||” (or) goes to the next item which is the title. We later save the title into the data-tooltip so all subsequent times the first line is encountered, the data-tooltip is defined and it never continues to the title. I hope that makes sense.

    # December 16, 2011 at 12:52 am

    WOW IT WORKS! Whether the data-tooltip is just a pseudo attribute? Is it valid?

    Actually I also want to change the tooltip removal with fadeOut effect. But why didn’t ever works? Is the fadeOut was never completely eliminate the element and the contents? Even slideUp and hide nor can be used…

    # December 16, 2011 at 6:41 am

    The data-tooltip is a valid attribute in HTML5. Anything with data- in front is valid. I could have just as easily saved the tooltip title into the element’s jQuery data.

    The reason fadeOut isn’t working is because the #tooltip isn’t unique. If you unhover the element with a tooltip and immediately hover over another tooltip, the tooltip div has fadeIn() applied as soon as the content changes. You could make a unique tooltip id for each element, but it could get messy if you don’t make sure the tooltips are removed – which I’ve seen happen if a user goes crazy nuts hovering and unhovering numerous tooltips.

    # December 16, 2011 at 8:20 pm

    Oh, I understand! Thanks @Mottie….

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".