jQuery UI提示框 - 无法显示在元素顶部

Question

请在此JS FIDDLE查看我的代码。

我希望我的工具提示显示在元素的顶部，但是我做错了什么？

我在jquery UI文档中也没有找到关于工具提示位置属性的有用信息，我的“my”和“at”是什么意思？我从他们的演示中复制了代码。

- DS_web_developer

Answer 1

你应该将位置'my'设置为'bottom-(底部距离)'。 查看这个JS FIDDLE。

- Bruno Chagas

---

谢谢...这些术语是什么意思...my和at？ 顺便问一下，为什么我在你的例子中失去了动画效果？ - DS_web_developer

我的是: position: { my: "底部居中-50", at: "顶部居中" }, 您失去了动画，因为我改变了工具提示的位置，但未更改动画的开始部分，请参见此处 JS FIDDLE。在这一行中 ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" - Bruno Chagas

您可以通过将“show”选项更改为以下内容来添加动画效果：{ effect: "slideDown", delay: 250 } - Brian Vanderbusch

@BrianVanderbusch：我已经检查过并且尝试了一些方法，但是仍然没有解释清楚...我的代表什么，at代表什么。 - DS_web_developer

我在上面编辑了我的答案来解释...这里没有足够的字符来这样做。 - Brian Vanderbusch

Answer 2

如果我理解正确，您希望工具提示文本完全覆盖它所指向的图像？

不幸的是，这在工具提示中是不可能的。原因是，只有当鼠标“悬停”在触发工具提示的元素上时，工具提示才有效。一旦您的工具提示覆盖了该元素，您的鼠标就会悬停在工具提示上，而不是所选元素上，这将触发工具提示的关闭事件。

如果最终结果比过程更重要，您可以将工具提示的“打开”和“关闭”事件都设置为“单击”，而不是它们的默认值，然后相应地定位。

编辑（解释my和at）：

my和at有点像动态的x，y坐标系，可帮助您对齐元素，但每个元素本身都是一个x，y。它们都允许您设置2个对象之间的参考点，这些对象彼此有关系，本例中是工具提示（my）和实例化工具提示的对象（at）。

在您的情况下，my是弹出的工具提示，而at是当鼠标事件在其上触发时会导致工具提示实例化的图像。每个选项都采用一个平面字符串或相对字符串位置，以确定2个对象（在DOM中的位置）之间的关系。因此，如果您希望工具提示的顶部中心与图像的绝对中心对齐，无论它们在DOM中出现在哪里，您应将以下内容设置为：

position: {
            my: "center top",
            at: "center center"
        }

通过结合像素值或百分比值，您可以通过偏移 my 和 at 来进一步控制。

position: {
            my: "center+10 top+50",
            at: "center+5 center+25"
        }

- Brian Vanderbusch

---

不，我只想让我的工具提示显示在元素的顶部。并且像这里一样有一个简单的动画：http://jqueryui.com/tooltip/#custom-animation（最后一个链接，将其从底部改为显示在顶部） - DS_web_developer

在这种情况下，Bruno会为您提供帮助。 - Brian Vanderbusch

Answer 3

我想给那些无法理解这个术语的未来搜索者一个简单的答案。它的定义是，'my'是我的选择器，就像“我的”图片一样。

$('img').tooltip();

同时，“at”是提示工具应该出现的位置。

例如：

$('img').tooltip({ position: { my: "right center", at: "left center" } });

在这里，我们选择将“我的”图像放在右侧，垂直居中。工具提示相对于图像出现在左侧，并且也是垂直居中。

- symphony86