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

Question

我正在尝试显示禁用按钮的工具提示。我不确定是否会为禁用元素触发 jquery 事件，但我正在尝试检查是否可以显示禁用项目的工具提示。我的例子是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);
            }
        }
    });
});

Answer 1

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

查看文档 (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>

Answer 3

作为一种解决方法，您可以使用未禁用的 HTML 元素封装按钮并在其上应用工具提示。

这是我们在 Angular 上使用的示例，但您明白了。 HTML：

<div ng-controller="MyCtrl">
<br/>
<br/>
<br/>
<div class="container">
    <div class="row">
        <div style="display: inline-block;" tooltip="My Tooltip"><input class="input-xxlarge" 
            type="text" ng-disabled="isDisabled" ng-model="myModel"/></div>

        <br/>
        Disable/Enable <input type="checkbox" ng-model="isDisabled"/>

    </div>
</div>

JS：

var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl($scope) {
    $scope.myModel = "Tooltip only works when input is enabled.";
    $scope.isDisabled = false;

}

查看工作示例： http://jsfiddle.net/RWZmu/

Answer 4

只需在按钮周围添加父容器并在那里设置工具提示属性，这样您的容器就会受到影响，而不是按钮。

<div class="container" title="My tooltip">
    <input type="button" disabled="disabled" value="My button"/>
</div>