Search code examples
jquerymouseoverhiddenqtip

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?

Solution

  • 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);