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

我一直在为这几天的工作。我有一个应用程序使用jQuery UI作为datepickers。现在，我还需要一些增强的工具提示，所以我很高兴看到向jQueryUI添加了工具提示窗口小部件。为什么不是这个jQuery UI工具提示按预期工作？

我仍然需要支持旧版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的匹配版本。）

首先，我无法获取位置属性的工作。我预计工具提示将出现在它所连接的控件下方，其左上角以控件为中心。（我做了灰色以便可见。）但是，工具提示出现在窗口的左边缘。

其次，我要点击在DIV为了使工具提示中显示，而我期待，它将与悬停出现。

我觉得我错过了一些关于工具提示应该如何使用的基本问题，但就像我说过的，我已经在这里呆了好几天了。任何人都可以解释我错过了什么吗？

来源

2013-05-07 JeffK

你想要这样吗？ 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'摘录）

我（默认： “中心”）

类型：String

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

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

来源

2013-05-07 18:52:06 SirDerpington

你使用了什么浏览器？我的问题中的评论是我在Chrome上看到的。 – JeffK 2013-05-07 19:22:46

我想我的交换位置参数被解析为'position {my：“left”，at：“center”}'这解释了我所看到的。它看起来像我需要的位置：{我的：“左上方”，在：“中心底部”}。 – JeffK 2013-05-07 19:24:06

用Firefox 20.0.1制作小提琴。只是用Chrome 26.0.1410.64查看它。工作也很好。我的解决方案和你的“中心底部”有什么不同？因为我没有看到一个。 – SirDerpington 2013-05-07 19:26:51

从jQuery UI Position docs关于“我的”：

该元件上的位置被定位成与对准目标元素定义：“水平垂直”对准。 [...]可接受的水平值：“左”，“中”，“右”。可接受的垂直值：“顶部”，“中心”，“底部”。例如：“left top”或“center center”。

您需要调换您的位置值。如SirDerpington的答案所示。

position: { my: "left top" },

来源

2013-05-07 19:05:42 eclps

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

回答

相关问题