Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

qTip2 smart positioning via viewport

I have right panel, that should have qTip on each element. Area is scrollable, so lowee tips just dont fit in window. Problem demonstrated below:

enter image description here

If i add smart positioning to my tooltip:

 position: {
        viewport: $('#window')
    }

I get the tooltip stay inside the window, but now it sets position automatically above or below element (instead al the left of it) and goes over clickable elements, making them unreacheble for user. Demonstrated below:

enter image description here

The question is: how do I make tooltip with smart positioning withing viewport (window) that keeps initial position (left)?

like image 237
Prosto Trader Avatar asked Nov 11 '13 06:11

Prosto Trader


1 Answers

Got it. To make it stay visible we can use adjust. This option determines the kind of viewport positioning that takes place. If we put adjust: {method: none shift} - then the tooltop, when is getting out of visible, will not move horizontally (none) and move vertically (shift).

For more option read the manual. http://qtip2.com/plugins#viewport

position: {
        at: 'center left',
        my: 'right center',
        effect: false,
        viewport: $('.mainPanel'),
        adjust: {
            method: 'none shift'
        }
    },
like image 188
Prosto Trader Avatar answered Oct 05 '22 20:10

Prosto Trader