I have a qTip tooltip attached to an element on my page whose parent <div> is hidden (display: none). I want to show the tooltip automatically when the parent becomes visible (display: block). Is this possible?
Sample HTML:
<div id="parent" style="display: none;">
<div id="child">Child Element</div>
</div>
JS:
$("#child").qtip();
I've tried using the ready option to trigger the tooltip automatically:
$("#child").qtip({
ready: true
});
But this makes the tooltip appear immediately even though the parent <div> is hidden.
qTip also provides a when option, in which you can display the tooltip when a certain event occurs, but this only accepts built-in jQuery events. I can't find a way to define my own function and show the tooltip when the display value of the parent <div> is block.
You could use a custom event,
$("#child").qtip({
show: { when: { target: $("#child").parent(), event: "showevent" } }
});
$("#parent").show().trigger("showevent");