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.

1

1 Answer 1

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.

2
  • 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 = $("<span>"); wrapperSpan.css({ position: "relative" }); $(this).wrap(wrapperSpan); var span = $("<span>"); span.attr({ "title": this.title, "class": "DisabledButtonToolTipSpan" }); $(this).parent().append(span); } }); } }); May 26, 2011 at 15:01
  • 1
    .DisabledButtonToolTipSpan { position :absolute; z-index :1010101010; display :block; width :100%; height :100%; top :0; } May 26, 2011 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.