Forums

Give help. Get help.

  • # 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 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.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag