I am using qTip: and my current problem is that when I hover the tooltip it disappears (because the target was mouseleave/mouseout).

Is there a way to make it stay visible when I hover the tooltip? I positioned the tooltip so that its right under the target so there are zero empty space between the target and the tooltip.

I am using qTip: http://craigsworks.com/projects/qtip2 and my current problem is that when I hover the tooltip it disappears (because the target was mouseleave/mouseout).

Is there a way to make it stay visible when I hover the tooltip? I positioned the tooltip so that its right under the target so there are zero empty space between the target and the tooltip.

• javascript
• jquery
• qtip2

• Please add some code, especially the jQuery part – Tim Commented Jan 26, 2012 at 14:09
• And take a look at the documentation, maybe the hide option will help. craigsworks.com/projects/qtip2/docs/hide – Tim Commented Jan 26, 2012 at 14:11
• Check the "hide.target" option http://craigsworks.com/projects/qtip2/docs/hide/#target. By default, the tooltip is hidden when leaving the element .qtip() was called upon. – Didier Ghys Commented Jan 26, 2012 at 14:12

3 Answers 3

Use fixed: http://craigsworks.com/projects/qtip2/docs/hide/#fixed

You may wish to add a delay as well before the tooltip disappears, in case there's some distance between your triggering element and the tooltip.

e.g.

$('.moreinfo').qtip({
    content: {
        text: $('<p>This is a tooltip.</p>')
    },
    show: {
        effect: function() { $(this).fadeIn(250); }
    },
    hide: {
        delay: 200,
        fixed: true, // <--- add this
        effect: function() { $(this).fadeOut(250); }
    },
    style: {
        classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded'
    }
});

Hope it helps.

Use fixed: true as well as leave: false

The problem you might be having is that when you leave the qtip target it is hiding.

For some reason, using fixed:true alone didn't work for me. Instead, I had to use these configurations (v3.0.3):

hide: {
   fixed: true,
   delay:90,
},
position: {
   viewport: $(window)
},