Jquery UI tooltip on disabled button

Question

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

Solution 1

Looks like it's not guaranteed to work properly.

See the doc (http://api.jqueryui.com/tooltip/):

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.

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.

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

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

Solution 2

Instead of using disabled="disabled" you can use onclick="return false;" then the events still gets fired and the tooltip will show, but nothing happens when you click the button. This will also work on a checkbox :)

So instead of this:

<p>
  <input type="button" disabled="disabled" title="This a test disabled button." value="hover me please">
</p>

You write this:

<p>
  <input type="button" onclick="return false" title="This a test disabled button." value="hover me please">
</p>

Solution 3

As a workaround you could encapsulate the button with a HTML element that's not disabled and apply tooltip on it.

This is an example that we've used on angular, but you get the point. 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;

}

See working example: http://jsfiddle.net/RWZmu/

Solution 4

Just add parent container around the button and set the tooltip attribute there so your container will be affected instead of the button.

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

View more solutions