JQuery UI tooltip на отключенной кнопке

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 не гарантирует любого уровня поддержки всплывающих подсказок, связанных с отключенными элементами. К сожалению, это означает, что если вам нужны всплывающие подсказки для отключенных элементов, вы можете получить смесь встроенных всплывающих подсказок и подсказок JQuery UI.

EDIT: Один из способов обойти это было бы, вместо установки кнопки disabled, стиль его так, что он выглядит, как он был отключен. Если это простая кнопка, это все, что вам нужно сделать, если это кнопка submit, вам также придется помешать ей отправить форму.

EDIT # 2: Я дал вышеописанному отзыву Временного решению попробовать и это, кажется opacity:0.5 в значительной степени делает работу (источник: tjvantoll.com):

.disabled-button { 
    opacity: 0.5; 
} 

Вот ваша обновленная скрипка: http://jsfiddle.net/jkLzuh0o/3/

Answer 2

Вместо использования 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>

Answer 3

Какобходной путь, вы можете инкапсулировать кнопку с элементом 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/