Search code examples
jqueryqtip

Persistent qtip which appears on hover disappears only by clicking on an element

I am using qtip version 1.0.0-rc3 and have to solve the following problem : I have a div element on which a qtip has to appear on hover. The div element has an anchor tag within it. When the user clicks on the link, I want the qtip to persist even when the mouse has moved out of the div. The qtip has to be hidden only when the use clicks on the link again or on some other link on the page[There are multiple such div's on the page]. The HTML has the following structure :

Name

I've tried using hide : 'unfocus', but this does not serve the purpose. Basically, I need a way to control how my qtip is hidden.

Solution

  • You need to do a few things when trying to do this with qTip v1. Specifically, set the show event to be 'mouseenter' since it's a DIV, the hide.fixed property to 'true' and then also set the hide.when.event property to 'unfocus' as you suspected. For example:

    $('#myDiv').qtip({
    show: 'mouseenter',
    hide: {
        fixed: true,
        when: {
            event: 'unfocus'
        }
    }
});

    Here's a working example on jsFiddle:

    http://jsfiddle.net/kiddailey/8tuLd/

    PS. You state that the qTip shows on hover and then hides "when the user clicks the link again." I was a bit confused by this, so please clarify if my example doesn't quite meet your needs.