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

我試圖顯示禁用按鈕的工具提示。我不確定jQuery事件是否爲禁用的元素激發了，但我試圖檢查是否可以顯示禁用項目的工具提示。我的例子是here 禁用按鈕上的Jquery UI工具提示

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

來源

2014-10-01 Kurkula

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

看到該文檔（http://api.jqueryui.com/tooltip/）：

一般情況下，禁用的元素不會觸發任何DOM事件。因此，無法正確控制禁用元素的工具提示，因爲我們需要監聽事件以確定何時顯示和隱藏工具提示。因此，jQuery UI不保證對附加到禁用元素的工具提示提供任何級別的支持。不幸的是，這意味着如果你需要禁用元素的工具提示，最終可能會混合使用本地工具提示和jQuery UI工具提示。

編輯：一種方式去解決，這將是代替按鈕設置爲disabled，樣式，以便它看起來就像是禁用的。如果它是一個簡單的按鈕，那就只需要按一下這個按鈕，你也必須阻止它提交表單。

編輯＃2：我給上面的解決方法一試，它似乎opacity:0.5幾乎沒有工作（來源：tjvantoll.com）：

.disabled-button { 
    opacity: 0.5; 
}

這是你更新的提琴：http://jsfiddle.net/jkLzuh0o/3/

來源

2014-10-01 05:04:32 webeno

我們可以覆蓋提示CSS實現的功能？有些東西像.ui-tooltip [disabled =「disabled」]。 – Kurkula 2014-10-01 05:10:43

看看我的編輯：認爲最好的是，如果你嘗試模仿一個按鈕的禁用狀態... – webeno 2014-10-01 05:15:19

@webeno，但你不覺得這是作弊嗎？ – 2014-10-01 05:25:29

不要使用disabled =「disabled」，你可以使用onclick =「return false;」那麼事件仍然會被解僱，工具提示將會顯示，但是當你點擊按鈕時沒有任何反應。這也將上一個複選框:)

工作的這一所以不是：

<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>

來源

2014-10-26 14:10:01 Frank

很酷。這對我來說是第一選擇，因爲我希望按鈕被禁用。 – 2017-04-05 14:16:49

作爲解決方法是您可以使用未禁用的HTML元素封裝按鈕並在其上應用工具提示。

這是我們在角度上使用的一個例子，但您明白了。 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/

來源

2016-10-20 06:49:44

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

回答

相關問題