通过视口进行qTip2智能定位

时间:2013-11-11 06:24:26

标签: javascript tooltip qtip2

我有右侧面板,每个元素都应该有qTip。区域是可滚动的,因此低级提示不适合窗口。问题如下所示:

enter image description here

如果我在工具提示中添加智能定位:

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

我将工具提示保留在窗口内,但现在它自动在元素的上方或下方设置位置(而不是在其左侧)并且遍历可点击元素,使得它们对用户来说不再容易。演示如下:

enter image description here

问题是:如何使用保持初始位置(左侧)的视口(窗口)进行智能定位的工具提示?

1 个答案:

答案 0 :(得分:10)

知道了。 为了让它保持可见,我们可以使用adjust。此选项确定发生的视口定位的类型。如果我们把adjust:{method:none shift} - 那么tooltop,当它离开可见时,不会水平移动(无)并垂直移动(移位)。

有关更多选项,请阅读手册。 http://qtip2.com/plugins#viewport

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