[jQuery] How to load vtip tooltip on a dynamically generated element?

Question

I'm new to jQuery and trying to combine the use of a tooltip plugin and a lightbox plugin. More specifically, I am using Colorbox (http://colorpowered.com/colorbox/) and vtip.

Colorbox generates a div which displays an image like this:

<div id="cboxLoadedContent" style="display: block; width: 400px; overflow: auto; height: 498px;">
<img src="image.jpg" id="cboxPhoto" style="margin: 49px auto auto; border: medium none; display: block; float: none; cursor: pointer;">
</div>

I next add class="vtip" title="This is a tip." in order to use the vtip style, but for some reason it does not work when it's a title tag on an element dynamically generated by Colorbox, but works on anything already loaded on the page.

Can anyone explain to me why this is and possibly offer some solutions to fix this problem?

Answer 1

The clue is at the bottom of the vtip file:

jQuery(document).ready(function($){vtip();})

vtip is being called in document ready. It doesnt know about the elements you havent yet added. You need to recall the vtip function after you've added your elements.

vtip();

PS vtip hasnt been written as a plugin, otherwise you could chain it together with your other code eg

$('div').append('<a>example</a>').vtip(); //currently this wont work

You might want to contact the author and suggest the change, or find another tooltip - there are plenty around.