CODEWITHSUNDEEP
jquerymouseoverhiddenqtip
daGUY
daGUY

Reputation: 28743

jQuery qTip: disable on hidden elements

I'm using jQuery qTip to provide tooltips on a set of buttons, but the buttons are initially hidden by default until another action on the page triggers them to display. However, my qTip tooltips are still appearing if you mouseover where the hidden buttons are located on the page.

Since I'm fading the buttons in, I need to animate their opacity from 0 to 1, so I can't hide the buttons totally with display: none (which I believe is why they're still reacting to the mouseover event). Is there any way I can disable the tooltips when the opacity is 0?

Upvotes: 0

Views: 1036

Answers (2)

daGUY
daGUY

Reputation: 28743

I discovered that qTip tips won't trigger on elements with visibility: hidden, so I fixed this by setting both the opacity and the visibility on the buttons' container:

#button-container {
    opacity: 0;
    visibility: hidden;
}

Then toggling the visibility before animating the opacity:

$('#button-container').css({visibility: 'visible'}).animate({opacity: 1}, 300);

Upvotes: 2

lucuma
lucuma

Reputation: 18339

You can disable qTips:

$('*').qtip('disable') // or specify the selector

There is also an enable:

$('*').qtip('enable')

Basically in the callback for your fade in, enable the qtips.

Upvotes: 1

Related Questions