qTip2 - display tooltip when any DOM object is created

107 Views Asked by At

I am working around with qTip2 for tooltips, and I have a situation where I want to display several tooltips on the screen, but I want them to appear whenever a corresponding DOM element is created.

The element is created as a result of a third party tool, and I am not capable of controlling it.

I have spent days going over the documentation and trying the examples, but I cannot seem to produce this. I very simply want to have a tooltip appear whenever a given element of a certain class is created, and for the tooltip to display the contents of one of its HTML attributes.

Is this conceivable? I can only find answers that relate to clicking or hovering an element that already exists, nothing I can find seems to correspond to new ones that might appear later on.

2

There are 2 best solutions below

0
On

You should be able to trigger the tooltip by using the trigger method to fire a mouseover event.

using the example from the documentation:

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

you could trigger the tooltip with

$('ul:last li.active').trigger('mouseover');
0
On

There is an event called DOMNodeInserted than can help you.

$(document).on('DOMNodeInserted', function(e) {
    $(e.target).qtip({...});
});