jquery tooltip on dynamic element - ajax

Question

I use this tooltip plugin to make the tooltip on element as
$('.showtooltip').tooltip({
delay: 0,
track: true,
showURL: false,
bodyHandler: function() {
var tipStr = "SOME DISPLAY HTML";
return $(tipStr);
}
});
And my ajax create element dynamically.
$("<img alt='' class='showtooltip' src='image.jpg' />");
so when this image is added to document. The tooltip doesn't display.
Then I use live() in jquery :
$(".showtooltip").live("mouseover", function() {
$(this).tooltip({
delay: 0,
track: true,
showURL: false,
bodyHandler: function() {
var tipStr = "SOME DISPLAY HTML";
return $(tipStr);
}
})
});
But tooltip only display after the first time mouse over the image.
How can i use tooltip on dynamic element ?

Answer 1

I used something like this to rebind after an ajax call. It may help.
$(".showtooltip").live("mouseover",function(){
if (!$(this).hasClass("tooledUp")){
$(this).tooltip({
delay: 0,
track: true,
showURL: false,
bodyHandler: function() {
var tipStr = "SOME DISPLAY HTML";
return $(tipStr);
}
});
$(this).tooltip().show();
$(this).addClass("tooledUp");
}
});
From the forum here: http://static.flowplayer.org/tools/forum/30/37281

Answer 2

<input type="button" id="btn" value ="Click here" />
$(document).ready(function(){
$("#btn").click(function(){
$("<input type='checkbox' title='waaaaw' />").appendTo($(this).parent()).ready(function(){
$(this).tooltip({
delay: 0,
track: true,
showURL: false,
bodyHandler: function() {
var tipStr = "SOME DISPLAY HTML";
return $(tipStr);
}
}).addClass("tooledUp").show();
});
});
});