1

Mozilla Firefox will not display tooltips of disabled controls. Is there another way to display them?

I would prefer a solution without using javascript.

There is an easy method I could find is to change in css styles is

button,
input
{
    position: relative;
    width: 200px;
}

button[disabled]:hover:before,
input[disabled]:hover:before
{
    position: absolute;
    top: 10px;
    left: 10px;
    content: attr(title);
    background-color: #ffffe1;
    color: #000;
    line-height: 10pt;
    font-size: 8pt;         
    border: 1px solid #000;
    z-index:10000;
    padding:2px;
}

This works fine in case of button element, but does not work for the input type button control/element.

drudge
  • 35,471
  • 7
  • 34
  • 45
Preetham.C.N
  • 21
  • 3
  • similar: http://stackoverflow.com/questions/2034820/firefox-does-not-show-tooltips-on-disabled-input-fields – manji Apr 15 '11 at 16:25

1 Answers1

2

trying using a javascript tool tip to add dynamic html tool tips. Then you wont' need to rely on how different browsers render tool tips for disabled html elements.

FoneyOp
  • 336
  • 1
  • 6
  • 1
    `code` //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 = $(""); wrapperSpan.css({ position: "relative" }); $(this).wrap(wrapperSpan); var span = $(""); span.attr({ "title": this.title, "class": "DisabledButtonToolTipSpan" }); $(this).parent().append(span); } }); } }); – Preetham.C.N May 26 '11 at 15:01
  • 1
    .DisabledButtonToolTipSpan { position :absolute; z-index :1010101010; display :block; width :100%; height :100%; top :0; } – Preetham.C.N May 26 '11 at 15:06