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?

Ranch

As of Firefox 8, the title of a disabled element is displayed upon hover. – Agamic

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.

Mafaldamafeking

Good to know that its a known issue and it was reported. Sucks that nobody is working on it though. Thanks for the info. – Ranch

I agree. I'm not sure it's a bug but an interpretation of the standard where it says disabled elements don't receive focus. I can see its usefulness, though. – Daw

I submitted a patch to Firefox that fixes disabled tooltips in #274626 so hopefully won't be long for it to be released. – Conversion

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.

Crimson

You're a life saver! Worked perfectly... This is exactly the problem with Bootstrap... and we just need to show the title even if the button is disabled to inform the end user what that button does! ;) – Benevolent

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

Ibson

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.

Adjectival

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.

Pontificate

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

Eugenioeugenius

Yeah that immediately came to mind. However, if there is a way to do it without resorting to javascript, that would be great. Thanks. – Ranch