How to load vtip tooltip on a dynamically generated element? - jquery-plugins

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 and vtip.
Colorbox generates a div which displays an image like this:
<div id="cboxLoadedContent" style="display: block; width: 400px; overflow: auto; height: 498px;">
<br>
<img src="image.jpg" id="cboxPhoto" style="margin: 49px auto auto; border: medium none; display: block; float: none; cursor: pointer;">
<br>
</div>
</code>
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

If you don't want to have to re-call the function every time a new element is written to the page, I wrote an update to vtip. I rewrote the vtip function as a jQuery plugin, to be chainable, to allow custom settings, and to work with live elements. Its using a mapping of events, so it will work with jQuery 1.4.3 and up.
(function ($) {
$.fn.vtip = function (options) {
var settings = {
xOffset: -10,
yOffset: 6,
arrow: '/images/vtip_arrow.png'
};
if (options) $.extend(settings, options);
return this.live({
mouseenter: function (a) {
this.t = this.title;
this.title = "";
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
$("p#vtip #vtipArrow").attr("src", settings.arrow);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
},
mouseleave: function (a) {
this.title = this.t;
$("p#vtip").fadeOut("fast").remove();
},
mousemove: function (a) {
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
}
});
};
})(jQuery);
// You can use it with any class, I'm using the class 'vtip' below.
$(document).ready(function(){
$('.vtip').vtip();
});
// If necessary, add custom settings like so:
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'});

Answer 2

I tried the code/re-written plugin on this page and ran into some complications... perhaps this will work better for someone and save you some time:
(function ($) {
$.fn.vtip = function (options) {
var settings = {
xOffset: -10,
yOffset: 20,
arrow: 'http://simages0.showtimesfast.com/icons2/vtip_arrow.png'
};
if (options) $.extend(settings, options);
return this.live('mouseover mouseout mousemove', function(a){
if(a.type == 'mouseover'){
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("body").append('<p id="vtip"><img id="vtipArrow" />' + this.title + "</p>");
$("p#vtip #vtipArrow").attr("src", settings.arrow);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
}else if (a.type == 'mouseout'){
$("p#vtip").fadeOut("fast").remove();
}else if (a.type == 'mousemove'){
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
}
});
};
})(jQuery);
Currently in use on http://www.showtimes.ca/ for you to see it working in action. Thanks to Steve above as you led me in the right direction for working with live events.

Answer 3

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.