Tipsy jquery plugin for dynamic live events is not

Question

I'm using the tipsy jquery plugin to create tooltips for dynamically appearing elements.

The tooltips work on non-dynamic elements, so I've definitely included everything that I need. I'm using jquery 1.5.1

This is my jquery code: $('.voted-user-image').tipsy({gravity:'s', live: true});

This is the html of an image link element that appears dynamically in a div after a link is clicked that triggers an AJAX request:

<a href="/profiles/2" class="voted-user-image" title="Test">
    <img alt="Justin meltzer" src="/system/photos/2/tiny/Justin Meltzer.jpeg?1306836552">
</a>`

How can I get this tooltip plugin to work?

Answer 1

function initTipsy(){
    $(function(){ $('.tips').tipsy({gravity: 's',html: true}); });
    $(function(){ $('.tips-right').tipsy({gravity: 'w',html: true}); });
    $(function(){ $('.tips-left').tipsy({gravity: 'e',html: true}); });
    $(function(){ $('.tips-bottom').tipsy({gravity: 'n',html: true}); });
}

I have this function that I call in my main.js that works for my whole project. This allows me to add tips to any static element. I had the same problem with dynamic elements and the solution I found is to call initTipsy again after appending the new element to the html. I know this is not a pretty solution, but it works for sure. Hope that helps somebody.

Answer 2

It should work just fine..

check the example .. http://jsfiddle.net/gaby/3pAue/2/ (uses tipsy,and 1.5.1 jQuery)

The error must lie somewhere else.. make sure your html is valid (the one brought by ajax, and it is valid to be placed where you place it..)

Answer 3

I just called the plugin again in a script tag in the div that the AJAX request rendered. That worked.

Answer 4

Not sure why Dolphin's answer got upvoted and even rewarded bonus reputation. He suggests using the live option of jQuery tipsy, but this is already used in the code presented by the original poster (unedited). Obviously the option did not seem to do the trick.

To answer the original post: the live option of the tipsy plugin does not seem to work well with all versions of jQuery. Version 1.7.1 has been confirmed to work, so upgrading jQuery might be a good idea.

Answer 5

Can you try this code:

$('a.voted-user-image').tipsy({live: true});

Seems so wrong calling plugin each time you add content :)