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

Question

我正在尝试显示禁用按钮的工具提示.我不确定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);
            }
        }
    });
});

Answer 1

看起来不能保证正常工作.

请参阅doc(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/

Answer 2

您可以使用 onclick="return false;" 而不是使用 disabled="disabled" 然后事件仍然会被触发并且工具提示将显示，但是当您单击按钮时没有任何反应。这也适用于复选框:)

所以而不是这个：

<p>
  <input type="button" disabled="disabled" title="This a test disabled button." value="hover me please">
</p>

你这样写：

<p>
  <input type="button" onclick="return false" title="This a test disabled button." value="hover me please">
</p>