Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make qTip not disappear when hovering 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.

like image 841
Tower Avatar asked Jan 26 '12 14:01

Tower


2 Answers

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.

like image 105
jdlm Avatar answered Oct 28 '22 23:10

jdlm


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.

like image 34
Timothy Owen Avatar answered Oct 28 '22 21:10

Timothy Owen