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

Perimorph

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

Pneumoencephalogram

Can we override tooltip css to achieve the functionality? some thing like .ui-tooltip[disabled="disabled"]. – Perimorph

have a look at my edit: think the best is if you try mimicking the disabled state of a button... – Pneumoencephalogram

@webeno , but dont u think this is Cheating ? – Hutchison

@webeno , still User can click that button . – Hutchison

haha, "cheating", depends on what you want ot achive... :) yes, they can click the button, but unless it's a submit button, or you have not assigned and handler / other function to it, nothing will happen... at the end, the purpose of the OP was to have the tooltip appearing... – Pneumoencephalogram

@webeno , yes , but he wanted with disabled button . Now his functional requirement is Not working and look and feel is working. I think Functional requirement is more important though his look and feel requirement is satisfied.Thanks – Hutchison

@jQueryAngryBird simply put: jquery ui tooltip doesn't work properly with disabled elements, so you have 2 choices: 1. you live with it, or 2. you work around it... or do you have a better idea...? feel free to share! ;) – Pneumoencephalogram

Specify class to disabled element , and block its click event for such classes , api.jquery.com/event.preventdefault . You didnt specify that click event should be blocked for button you want to mimic as disabled. Your code is fine just think about it. Thanks – Hutchison

@jQueryAngryBird what is the default behaviour of a button input? nothing! so why do you need to prevent default on it? it's only submit that submits the form... – Pneumoencephalogram

@DanTheLion I'm glad you like it :) – Pneumoencephalogram

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

Banditry

cool. this worked for me first option in my case , as i want the button to be disabled. – Redtop

this generates a nightmare when applying to any middle or big existing application – Franco

Answer 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 works when input is disabled.";
    $scope.isDisabled = false;
    
}

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

Palaeozoic

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

Bataan

I would pull away from jQuery for the tool tip. This would be a heavy load for such and easy task. Also your example worked for me. – Understanding