Firefox does not show tooltips on disabled input fields

Question

Firefox doesn't display tooltips on disabled fields.

The following displays tooltip in IE/Chrome/Safari except Firefox:

<input type="text" disabled="disabled" title="tooltip text."/>

Why doesn't Firefox display tooltip on disabled fields? Is there a work around this?

Answer 1

Seems to be a (very old, and very abandoned) bug. See Mozilla Bugs #274626 #436770

I guess this could also be explained as intended behaviour.

One horrible Workaround that comes to mind is to overlap the button with an invisible div with a title attribute using z-index; another to somehow re-activate the button 'onmouseover' but to cleverly intercept and trash any click event on that button.

Answer 2

I guess you are using some frameworks like bootstrap. If so, it add pointer-events: none to the 'disabled' element, so all the mouse events are ignored.

.btn[disabled] {
  pointer-events: auto !important;
}

can fix the problem.

Answer 3

You can work around this with jQuery code like:

    if ($.browser.mozilla) {
        $(function() {
            $('input[disabled][title]')
                .removeAttr('disabled')
                .addClass('disabled')
                .click(function() {return false})
            })
    }

Answer 4

The z-indexing thing could be done like this:

  .btnTip

  {

     position: absolute;

     left: 0%;

     right: 0%;

     z-index: 100;

     width: 50px;

     /*background-color: red;*/

     height: 17px;

  }

(…)

<div style="background-color: gray; width: 400px;">

  Set width of the tip-span to the same as the button width.

  <div style="text-align: center;">

     <span style="position:relative;">

        <span class="btnTip" title="MyToolTip">&nbsp;</span>

        <input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />                                         

     </span>

  </div>             

Left and right helps positioning the host on top of the disabled element. The z-index defines what kind of layer you put an element in.

The higher number of a z-layer the more ‘on top’ it will be.

The z-index of the host and/or the disabled element should be set dynamically.

When the disabled element is disabled you want the tooltip host on top and vice versa - at least if you want to be able to click your element (button) when it is NOT disabled.

Answer 5

I have faced the similar issue and i could fix it using juery and small css class, you would require to create two new span elements and a css class which are as follows

Just add these in a general js and css file which is used in all over the application or web site

.DisabledButtonToolTipSpan
{
position    :absolute;
z-index     :1010101010;
display     :block;
width       :100%;
height      :100%;
top         :0;         
}

To display tooltip for disabled button in firefox browser.

$(window).load(function() {
    if ($.browser.mozilla) {
                $("input").each(function() {
                    if ((this.type == "button" || this.type == "submit") && this.disabled) {

                        var wrapperSpan = $("<span>");
                        wrapperSpan.css({ position: "relative" });
                        $(this).wrap(wrapperSpan);

                        var span = $("<span>");
                        span.attr({
                            "title": this.title,
                            "class": "DisabledButtonToolTipSpan"
                        });
                        $(this).parent().append(span);
                    }
                });
            }
        });

Hope this helps, Preetham.

Answer 6

You could use javascript. Use the mouseover event.

(A lot of libraries like JQuery and Mootools have tooltip plugins available. Using these you can even style the tooltips).