禁用按钮上的jQuery UI工具提示 [英] Jquery UI tooltip on disabled button

问题描述

我正在尝试显示禁用按钮的工具提示.我不确定是否为禁用元素触发了jquery事件，但是我正在尝试检查是否可以显示禁用项的工具提示.我的示例是此处

I am trying to show tooltip for a disabled button. I am not sure if jquery events fire for disabled elements but I am trying to check if I can show tool tip for disabled items. My example is here

<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);
            }
        }
    });
});

推荐答案

好像不能保证它能正常工作.

Looks like it's not guaranteed to work properly.

请参阅文档( http://api.jqueryui.com/tooltip/):

通常，禁用的元素不会触发任何DOM事件.因此，不可能适当地控制禁用元素的工具提示，因为我们需要侦听事件以确定何时显示和隐藏工具提示.因此，jQuery UI不保证对附加到禁用元素的工具提示的任何级别的支持.不幸的是，这意味着如果您需要在禁用元素上使用工具提示，则最终可能会混合使用本机工具提示和jQuery UI工具提示.

In general, disabled elements do not trigger any DOM events. Therefore, it is not possible to properly control tooltips for disabled elements, since we need to listen to events to determine when to show and hide the tooltip. As a result, jQuery UI does not guarantee any level of support for tooltips attached to disabled elements. Unfortunately, this means that if you require tooltips on disabled elements, you may end up with a mixture of native tooltips and jQuery UI tooltips.

编辑:解决此问题的一种方法是，将按钮设置样式，使其看起来好像已被禁用，而不是将按钮设置为disabled.如果这是一个简单的按钮，那么这就是您要做的，如果是一个submit按钮，则还必须阻止它提交表单.

EDIT: One way to go around this would be to, instead of setting the button to disabled, style it so that it looks like it was disabled. If it's a simple button, that's all you have to do, if it's a submit button, you'll also have to prevent it submitting the form.

编辑#2 :我尝试了上述解决方法，看来opacity:0.5确实可以完成这项工作(来源:

EDIT #2: I gave the above workaround a try and it appears opacity:0.5 pretty much does the job (source: tjvantoll.com):

.disabled-button {
    opacity: 0.5;
}

这是您更新的小提琴: http://jsfiddle.net/jkLzuh0o/3/

Here is your updated fiddle: http://jsfiddle.net/jkLzuh0o/3/

这篇关于禁用按钮上的jQuery UI工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！