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?

the plugin relies on the `title` attribute, that's where it pulls the text from to place in the tooltip — Justin Meltzer, Oct 22 '11 at 07:15

score 10 · Answer 1 · answered Oct 25 '11 at 11:31

10

Can you try this code:

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

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

answered Oct 25 '11 at 11:31

Haris Krajina

14,824
12
64
81

score 1 · Answer 2 · answered Jan 23 '17 at 12:53

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.

score 0 · Answer 3 · answered Mar 18 '13 at 09:06

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.

score 0 · Answer 4 · answered Oct 28 '11 at 23:36

0

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

answered Oct 28 '11 at 23:36

Gabriele Petrioli

191,379
34
261
317

score -3 · Accepted Answer · answered Oct 25 '11 at 03:47

-3

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

answered Oct 25 '11 at 03:47

Justin Meltzer

13,318
32
117
182

2

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. – Greg Pettit Oct 26 '11 at 14:06
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 ? – edonbajrami Nov 12 '13 at 00:40

Tipsy jquery plugin for dynamic live events is not working

5 Answers5

Linked