[jQuery] Trouble loading tooltips on all images displayed inside Colorbox
- by adaneko
I would like to load a tooltip plugin (I'm currently trying qTip, but I've tried a few and have run into the same problem each time) inside Colorbox (http://colorpowered.com/colorbox/).
Colorbox dynamically loads this code to display the images you want to show in it:
<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>
Using Colorbox's event hooks, I am currently calling my tooltip plugin on onComplete, but this only applies the tooltip to the first image in the group. If you go to the next image, the tooltip needs to be recalled as Colorbox regenerates the code displayed above.
What is the best way to recall the tooltip plugin? I have tried to recall the tooltip by attaching it to clicking on the div with the id "cboxNext" as a test, but it doesn't work since it takes time for cboxPhoto to load, so I think the functions generating the tooltip load before they can apply to the image.
