How to reapply jquery tipsy to existing elements

Question

I am using the jquery tipsy tooltip to display additional information. I now made my website responsive so I added a resize event listener and depending on the size of the page more or less elements are shown. Therefore I have to reapply the tipsy tooltips. E.g I now might have new elements which did not yet have a tipsy.

Unfortunately it seems that after each reapply I have not replaced already existing tipsys but added another one on top.

Please look at the jsfiddle for the effect. After resizing the html result pane you can see multiple callbacks in the javascript console when the tooltip is displayed.

http://jsfiddle.net/7mbbcmvz/1/

Html Code:

<body>
    <a href="xy">xxx</a>
</body>

Javascript Code:

var i = 0;

function addTipsy(event) {
    $('a').tipsy({
        title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};

addTipsy();

window.addEventListener('resize', addTipsy);

Try removing the previous handlers before calling addTipsy(). See http://stackoverflow.com/questions/3449321/jquery-how-to-remove-the-tipsy-tooltip — sb9, Nov 13 '14 at 16:44
The problem is not the shown tipsy, the handler is registered multiple times. Try the jsfiddle and open the javascript console. After you resized the window you will get multiple events for a single shown tooltip. — Fabian, Nov 13 '14 at 16:48
Hmm the jsfiddle does not work in chrome since the external tipsy.js file has the wrong mime type. Now fixed. — Fabian, Nov 13 '14 at 16:51

sb9 · Accepted Answer · 2014-11-14T08:03:41.503

Unbinding mouseenter and mouseleave before reapplying the tipsy handler seems to work:

var i=0;

function addTipsy(event) {
    $("a").unbind('mouseenter mouseleave');
    $('a').tipsy({
       title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};

addTipsy();

window.addEventListener('resize', addTipsy);

An alternative would be to remember those elements, that already have the tipsy handler by adding a class, and to add the tipsy handler only to those elements that do not have that class:

function addTipsy(event) {
    $('a').not(".tipsyApplied").addClass("tipsyApplied").tipsy({
        title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};

Thanks a lot this works, I'm not sure if its a nice solution, tipsy should handle that itself imho, but I am happy so far! — Fabian, Nov 13 '14 at 17:18

How to reapply jquery tipsy to existing elements

1 Answers1