Make qTip not disappear when hovering the tooltip

Question

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.

Crotchet

Please add some code, especially the jQuery part – Erick

And take a look at the documentation, maybe the hide option will help. craigsworks.com/projects/qtip2/docs/hide – Erick

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. – Linger

Answer 1

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.

Scabious

That doesn't help. I have both delay and fixed: ture, but it still disappears when you mouseover on the tooltip by moving fast – Feldstein

The documentation clearly states that this is the purpose of fixed. If it doesn't work it might be broken in the latest release, I haven't checked. – Scabious

Answer 2

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.

Kingfish

Does "leave: false" go in the "hide" section as well? – Folliculin

Answer 3

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)
},

Ohalloran