How do you prevent a jquery.qtip2 tooltip from hiding when the mouse is over the tip?

Question

Using jquery qTip2 for tooltips.

I have a tooltip with a link in it. I want the tip to stay open if the user's mouse enters the tip (not the trigger). Can't seem to figure out how to do that in the documentation....

Abort

Answer 1

If you want it to remain visible when you mouse over and into the tip, but still want it to dismiss on mouseout, use the fixed and delay options as described in the documentation here:

$('.selector').qtip({
     content: {
          text: 'I hide on mouseout, but you can mouse into me within 500ms',
     },
     hide: {
          fixed: true,
          delay: 500
     }
});

The hide parameter has many options. For example, if you just want to not hide it indefinitely, simply set hide to false:

$('.selector').qtip({
    content: {
        text: 'I never hide',
    },
    hide: false
});

If you want it to hide on a different event, such as clicking anywhere outside the tip, set the event explicitly:

$('.selector').qtip({
     content: {
          text: 'I hide when you click anywhere else on the document',
     },
     hide: {
          event: 'unfocus'
     }
});

If you want it to hide when the trigger is clicked, specify the click event:

$('.selector').qtip({
     content: {
          text: 'I hide when you click the tooltip trigger',
     },
     hide: {
          event: 'click'
     }
});

See specifically the "hide" options documentation for more info.

Mneme

thank you so much.. it helped me a lot.. i was just finding this only. – Edaphic

Answer 2

If you want the tip to stay open and then hide it when the user clicks outside the target or leaves the target:

show: {
    event: 'mouseover'
},

hide: {
     event: 'click mouseleave'
}

Haws