Tipsy jquery plugin for dynamic live events is not working

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?

Sericin

there's no javascript error unfortunately – Sericin

try after removing title from link – Judijudicable

the plugin relies on the title attribute, that's where it pulls the text from to place in the tooltip – Sericin

Answer 1

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

Sericin

Seems weird for me to downvote an answer you gave on your own question. ;-) However, this is not the right answer and will produce a negative result in both performance and code maintainability. Dolphin has it right; .live() is itself considered relatively inefficient (compared to .delegate() for example), but it will do the job properly with one binding. And it's part of the plug-in's options with no extra fuss required. – Kerek

I have a problem when i am adding live:true. In console it says "Uncaught TypeError: Object [object Object] has no method 'live' " Is there any other way to resolve this, to add on newly added divs a tipsy ? – Metastasize

Answer 2

Can you try this code:

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

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

Lecturer

Answer 3

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.

Charlyncharm

Answer 4

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..)

Rossiter

Answer 5

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.

Soakage