CODEWITHSUNDEEP
jqueryshowhiddenqtip
daGUY
daGUY

Reputation: 28743

qTip: show tooltip when element becomes visible

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.

Upvotes: 3

Views: 2137

Answers (2)

Kevin B
Kevin B

Reputation: 95030

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/

Upvotes: 2

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66921

Looks like you might have to simply trigger qtip() in the same place you trigger to show the parent (however you do that).

$('#whatever').on('click', function () { // just as an example
    $('#parent').show();
    $('#child').qtip();
});

Upvotes: 0

Related Questions