禁用按鈕上的 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

看起來它不能保證正常工作。

請參閱文檔（ 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 works when input is disabled.";
    $scope.isDisabled = false;
    
}

請參閱工作示例：http: //jsfiddle.net/RWZmu/

Answer 4

只需在按鈕周圍添加父容器並在那里設置工具提示屬性，這樣您的容器就會受到影響，而不是按鈕。

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