使用qtip时如何避免页面滚动？

Question

我是 qTip 的忠实粉丝，但我想知道是否有一种方法可以在不让页面滚动到顶部的情况下使用模式窗口。

环顾四周但还没有发现任何东西。这可能吗？

Answer 1

是的，这是可能的！您需要设置调整字段

adjust : {
    screen : true
}

，在其中指定工具提示的位置

position : {
    my : 'right center',
    at : 'left center',
    adjust : {
        screen : true
    }
}

我不确定这是否是 qTip1 的功能，但我在 qtip2 中使用过。工具提示是
自动调整以避免溢出和滚动

Answer 2

您应该将提示的目标设置为窗口，如 qTip 对话框演示：

 position: {
      my: 'center',
      at: 'center',
      target: $(window)
 }

您还可以选择通过 CSS 对提示应用固定定位，以防止模式对话框完全滚动。 qTip 自动适应所有具有固定定位的浏览器问题（咳 IE 咳）。例如：

 .ui-tooltip {
      position: fixed;
 }

或者，如果您有自己的类名：

 .ui-tooltip-myClassName {
      position: fixed;
 }

关于提供的其他答案，请注意 qTip2 对于视口调整有不同的格式（它不再是 qTip1 中的position.adjust.screen）并且特别允许您定义应使用哪些包含元素进行调整：

position: {
      viewport: $(window)
}

或者，对于包含元素而不是窗口/屏幕：

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

您现在还可以使用“method”参数定义如何进行调整，并可以将其限制为仅在单个元素上进行调整轴通过指定对方“无”。默认/旧方法是“flip”，但您也可以指定“shift”，它仅将笔尖移动到足以适合视口的位置。格式为：

position: {
      viewport: $(window),
      adjust: {
           method: '<method>'
      }
}

或者，

position: {
      viewport: $(window),
      adjust: {
           method: '<horizontalMethod> <verticalMethod>'
      }
}

例如：

position: {
      viewport: $(window),
      adjust: {
           method: 'shift'
      }
}


position: {
      viewport: $(window),
      adjust: {
           // Only adjust tip position on the horizontal axis
           method: 'shift none'
      }
}