我正在尝试显示禁用按钮的工具提示。我不确定是否为禁用元素触发了jquery事件,但是我正在尝试检查是否可以显示禁用项的工具提示。我的例子在这里
<p>Your age:
<input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>
<input type="button" title="This a test enabled button." value="hover me please">
</p>
<p>
<input type="button" disabled="disabled" title="This a test disabled button." value="hover me please"> </p>
$(function () {
$(document).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
看起来不能保证它能正常工作。
请参阅文档(http://api.jqueryui.com/tooltip/):
通常,禁用的元素不会触发任何DOM事件。因此,无法正确控制禁用元素的工具提示,因为我们需要侦听事件以确定何时显示和隐藏工具提示。因此,jQuery UI不保证对附加到禁用元素的工具提示的任何级别的支持。不幸的是,这意味着如果您需要在禁用元素上使用工具提示,则最终可能会混合使用本机工具提示和jQuery UI工具提示。
编辑:解决此问题的一种方法是,而不是将按钮设置为disabled
,对其进行样式设置,以使其看起来像已被禁用。如果这是一个简单的按钮,那就是您要做的全部;如果这是一个submit
按钮,则还必须阻止它提交表单。
编辑#2:我尝试了上述解决方法,它似乎可以opacity:0.5
完成很多工作(来源:tjvantoll.com):
.disabled-button {
opacity: 0.5;
}
这是您更新的小提琴:http : //jsfiddle.net/jkLzuh0o/3/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句