为什么不是这个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为了使工具提示中显示,而我期待,它将与悬停出现。
我觉得我错过了一些关于工具提示应该如何使用的基本问题,但就像我说过的,我已经在这里呆了好几天了。任何人都可以解释我错过了什么吗?
你想要这样吗? 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%”。百分比偏移量相对于被定位的元素。
从jQuery UI Position docs关于“我的”:
该元件上的位置被定位成与 对准目标元素定义:“水平垂直”对准。 [...]可接受的 水平值:“左”,“中”,“右”。可接受的垂直 值:“顶部”,“中心”,“底部”。例如:“left top”或“center center”。
您需要调换您的位置值。如SirDerpington的答案所示。
position: { my: "left top" },
你使用了什么浏览器?我的问题中的评论是我在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