Javascript – 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)?

Best Solution

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.

position: {
        at: 'center left',
        my: 'right center',
        effect: false,
        viewport: $('.mainPanel'),
        adjust: {
            method: 'none shift'
Related Question