I'm using qtip2 to replace standard "title" tool tags with nicely formatted tooltips. It works fine to set and display the qtips in almost all places using a single $('[title][title!=""]').each(function () {…} method.
The problem is that in the UI, there are some button clicks that replace the div the mouse is over with a partial html from the server using .load(html), in those cases the tooltip doesn't hide after the new partial loads, it works fine otherwise, eg any other button that have qtips that don't replace the div cause the tooltip to hide as desired.
I tried calling $('[title][title!=""]').qtip('hide'); before doing the .load(html) but it doesn't seem to have any impact.
What should I try? Here's the definition:
static updateTitles() {
$('[title][title!=""]').each(function () {
if (this.qtipLoaded === undefined) {
this.qtipLoaded = true;
$(this).qtip({
content: {
text: function (api) {
// Retrieve content from TITLE attribute of the $('.selector') element
return $(this).attr('title');
}
},
position: {
my: 'top left',
at: 'bottom right',
target: 'mouse',
adjust: { y: 10 }
},
style: { classes: 'qtip-light qtip-rounded' }
});
}
});
}
I found that it works if I use this:
hide: {
event: 'click mouseleave'
}
I had originally tried that with the wrong syntax.