Question

我已经在这几天工作了。我有一个使用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/。（请注意，我已使用左侧的External Resources来加载jQuery和jQuery UI的匹配版本。）

首先，我无法获得position属性。我希望工具提示会从它所连接的控件下方开始显示，其左上角以控件为中心。（我已经制作了灰色，因此可见。）但是，工具提示会出现在窗口的左边缘。

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

我觉得我错过了关于如何使用工具提示的基本原则，但就像我说的那样，我已经在这几天了。谁能解释我错过的东西？

Answer 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'从纪录片中提取）

我的（默认：“中心”）

类型：字符串

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

可接受的水平值：“left”，“center”，“right”。可接受的垂直值：“顶部”，“中心”，“底部”。示例：“左上角”或“中心”。每个维度还可以包含偏移量，以像素或百分比表示，例如“右+10顶-25％”。偏移百分比是相对于所定位的元素。

Answer 2

从jQuery UI Position docs代表'my'：

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

您需要交换您的头寸值。正如SirDerpington的回答所示。

position: { my: "left top" },

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

2 个答案: