Question

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.

Answer 1

You could use a custom event,

$("#child").qtip({
    show: { when: { target: $("#child").parent(), event: "showevent" } }
});

$("#parent").show().trigger("showevent");

http://craigsworks.com/projects/qtip/docs/reference/