Firefox does not show tooltips on disabled input fields

Firefox doesn't display tooltips on disabled field开发者_高级运维s.

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?

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.

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.

You can work around this with jQuery code like:

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

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.

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.

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