Search code examples
jquerycsspositiontooltipqtip2

How can I determine whether the tooltip upward or downwards when using qtip2?

I want to change tooltip position when tooltip opened to upward.

qtip2 init;

jQuery('.tip').each(function(){
   jQuery(this).qtip({
       position: {
           at: 'center center',
           my: 'top center',
           adjust: {
               y: 15,
               method: 'shift flip'
           },
           viewport: $(window)
       },
       show: { delay: 500 },
       hide: { fixed: true, delay: 300, leave: false }
   }); 
});

My init code as above and when hover over to element, it show as below for downward tooltip;

enter image description here

it's ok but, it shows as below for upward tooltip

enter image description here

I want it show as like this;

enter image description here

How can i?

http://jsfiddle.net/crLqm851/2/

Solution

  • It seems to me that flip is a wrong option to use in this case. Using flipinvert instead of flip makes the positions right :

    adjust: {
    y: 15, 
    method: 'shift flipinvert'
}

    It also positions right when not defining method at all :

    adjust: {
    y: 15
}

    forked fiddle -> http://jsfiddle.net/v68su257/

    The docs says :

    The default "flip" type basically flips the tooltip when it goes off-screen i.e. from top-right, to bottom-right etc. The "flipinvert" type works the same way, except when the flip happens it inverts the adjust.x and adjust.y properties.