为什么这个 jQuery UI 工具提示没有按预期工作？答案

【问题标题】：Why isn't this jQuery UI tooltip working as expected?为什么这个 jQuery UI 工具提示没有按预期工作？
【发布时间】：2013-05-08 03:14:32
【问题描述】：

我已经为此工作了好几天了。我有一个将 jQuery UI 用于日期选择器的应用程序。现在，我还需要一些增强的工具提示，所以我很高兴看到在 jQueryUI 中添加了一个工具提示小部件。

我仍然需要支持旧版本的 IE，所以我不能使用 jQuery 2.0。我已经升级到 jQuery 1.9.1 和 jQuery UI 1.10.3。

无论如何，工具提示的行为根本不像我预期的那样。我正在使用此代码创建工具提示：

    $(document).ready(function() {
        $('.tooltipStyle').tooltip({
            position: { my: "top left", at: "bottom center" },
            content: function() { 
                return "This tooltip is a function return value with <b>HTML content</b>"; 
            }
        });
    });

jsFiddle 上的完整演示：http://jsfiddle.net/2agHC/4/。（请注意，我使用左侧的外部资源来加载 jQuery 和 jQuery UI 的匹配版本。）

首先，我无法让 position 属性工作。我希望工具提示将出现在它所连接的控件的正下方，其左上角以控件为中心。（我已将灰色设为可见。）但是，工具提示出现在窗口的左边缘。

其次，我必须在 div 上单击才能显示工具提示，而我希望它会出现悬停。

我觉得我错过了关于应该如何使用工具提示的一些基本知识，但就像我说的那样，我已经这样做了好几天了。谁能解释我错过了什么？

【问题讨论】：

标签： jquery-ui jquery-ui-tooltip

【解决方案1】：

你想要这样吗？ jsfiddle

$(document).ready(function() {
    $('.tooltipStyle').tooltip({
        position: { my: "left top", at: "bottom" },
        content: function() { 
            return "This tooltip is a function return value with <b>HTML content</b>"; 
        }
    });
});

如果这不是您想要的行为，请回复。另外阅读jQuery UI Position 实用程序的文档可能会有所帮助。

我猜你所说的点击就在那里，因为工具提示直接悬停在元素上。尽管在您的示例中我不需要单击...工具提示会弹出，立即隐藏然后再次显示。

使它完整（就像eclps'从docu中提取的）

我的（默认：“中心”）

类型：字符串

定义要定位的元素上的哪个位置与目标元素对齐：“水平垂直”对齐。 [...]

可接受的水平值：“left”、“center”、“right”。可接受的垂直值：“top”、“center”、“bottom”。示例：“左上”或“中心”。每个维度还可以包含偏移量，以像素或百分比为单位，例如，“right+10 top-25%”。百分比偏移量是相对于被定位的元素的。

【讨论】：

你用的是什么浏览器？我的问题中的 cmets 是我在 Chrome 中看到的。
我猜我交换的位置参数被解析为position { my: "left", at: "center" }，这解释了我所看到的。看来我需要position: { my: "left top", at: "center bottom" }。
用 Firefox 20.0.1 制作了小提琴。刚刚用 Chrome 26.0.1410.64 看了一下。工作也很好。我的解决方案和你的at: "center bottom" 有区别吗？因为我没有看到。
就是这样。需要更仔细地阅读文档！谢谢！

【解决方案2】：

来自 jQuery UI Position docs 的“我的”：

定义要对齐的元素上的哪个位置目标元素：“水平垂直”对齐。 [...] 可以接受水平值：“左”、“中”、“右”。可接受的垂直值：“顶部”、“中心”、“底部”。示例：“左上角”或“中心” 中心”。

您需要交换您的位置值。如德平顿爵士的回答所示。

position: { my: "left top" },

【讨论】：