如何将jQuery Tooltip设置为基于指定容器div的绝对定位？

完全能做到让Tooltip固定在指定容器的某个位置，不管鼠标悬停在哪个触发元素上，都不跟着鼠标跑，就像个静态div那样。核心就是利用jQuery UI Tooltip的position配置项，把它的参考对象从触发元素改成你指定的容器就行，具体步骤如下：

核心配置思路 #

1. 关闭鼠标跟踪：默认Tooltip会跟着鼠标移动，所以要先把track设为false，这是实现固定位置的关键。
2. 绑定到目标容器：通过position选项里的of参数，指定Tooltip的位置参考是你要关联的容器div，而不是触发悬停的元素。
3. 精确定位对齐：用my和at参数来设置Tooltip自身的位置和容器的对齐点，比如你要Tooltip显示在容器的左下角，就可以把Tooltip的左上角对齐到容器的左下角。

代码示例 #

HTML结构 #

<!-- 你要关联的目标容器 -->
<div id="fixed-container" style="width: 300px; height: 200px; border: 1px solid #ddd; margin: 60px auto;">
  这是固定Tooltip位置的参考容器
</div>

<!-- 多个触发Tooltip的元素 -->
<p>悬停<a href="#" class="tooltip-btn">这个链接</a>看看效果</p>
<p>再悬停<a href="#" class="tooltip-btn">另一个链接</a>试试</p>

JavaScript初始化 #

$(function() {
  $(".tooltip-btn").tooltip({
    track: false, // 禁止Tooltip跟随鼠标移动
    position: {
      my: "left top", // Tooltip的左上角
      at: "left bottom", // 对齐到容器的左下角
      of: "#fixed-container", // 参考的目标容器
      collision: "none" // 关闭自动位置调整，确保固定在设定点
    },
    content: "我是固定在容器左下角的Tooltip！"
  });
});

灵活调整位置 #

如果需要调整Tooltip的位置，只要修改my和at的值就行：

• 想让Tooltip显示在容器的右上角：把my设为"right top"，at设为"right top"
• 想让Tooltip的右下角对齐容器的右下角：my设为"right bottom"，at设为"right bottom"
• 想让Tooltip居中显示在容器上方：my设为"center bottom"，at设为"center top"

要是容器的位置或大小动态变化了，还可以调用$(".tooltip-btn").tooltip("refresh")来重新计算Tooltip的位置，确保它始终固定在正确的地方。

内容的提问来源于stack exchange，提问作者Noobster