CODEWITHSUNDEEP
jquery
Luke Wenke
Luke Wenke

Reputation: 1138

issues with jquery tooltip and dynamic content - func_tooltip

I'm using a jquery tooltip that works on touch screens as well...

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

It involves calling func_tooltip(). The problem happens when there are some initial tooltips.... func_tooltip() is called and they work. Then if there is new dynamic content, func_tooltip() needs to be called again and then the new tooltip works. But if func_tooltip() is called twice the original tooltips only work once each again then they stop working.

See:

http://jsfiddle.net/vg83V/1/

some of the code:

$(function(){
    func_tooltip();
    $("#show_new_content").click(function(){
        $('#dynamic_div').html('<span title="New tooltip message" rel="tooltip">?</span>');
        func_tooltip();
    });
});

Upvotes: 1

Views: 119

Answers (1)

Herbert Peters
Herbert Peters

Reputation: 179

The particular tooltip library you are using lacks support for dynamic tooltips.

When you call func_tooltip a second time (or any subsequent call), then all the elements containing rel="tooltip" have already been processed and will have their title attribute removed.

This needs to be done so the native tooltip support of the browser won't display the tooltip itself.

To make that library being able to not wipe out previous tooltips it needs to store the original title attribute and reload it from there.

However there are other issues still to be dealt width, like event binding being added each time to the same tooltip when func_tooltip is called again. A central event handler that deals with all tooltips can circumvent that issue.

Another issue with that tooltip library is that it's not escaping anything found in the title attribute, which opens up security holes.

So that library needs some fairly big updates.

I have used jquery-ui's tooltips http://www.jqueryui.com/tooltip/ where I have been able to add new tooltips, by just injecting the new tooltip where I needed it. the jquery-ui tooltip can track mouse movements, and adjusts itself accordingly, so positioning is being taken care of as well as the other issues I've mentioned.

IMO it's quicker that you have a look at the jquery-ui tooltip, or something similar, than trying to fix the library you are just working with.

Upvotes: 1

Related Questions