禁用按钮上的jQuery UI工具提示

我正在尝试显示禁用按钮的工具提示。我不确定是否为禁用元素触发了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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章