9

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.

3

3 Answers 3

18

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.

2
  • That doesn't help. I have both delay and fixed: ture, but it still disappears when you mouseover on the tooltip by moving fast
    – mgPePe
    Nov 6, 2012 at 19:00
  • 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.
    – jdlm
    Nov 8, 2012 at 8:01
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.

1
  • Does "leave: false" go in the "hide" section as well? Jul 2, 2015 at 20:36
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.