Render tooltip on disabled HTML Button.

Question

I have a HTML button. I have tried to render a tooltip on it based on the "title" attribute of the button and it doesn't render. Mainly because it's disabled.

I then tried wrapping the button in a span and setting the "title" attribute of the span.

Hovering over the button that is wrapped in the span still has no effect. The tooltip will render on any other part of the span that is not part of the button tag. Like if i put some text in the span as well as the button, hovering over the text produces the tooltip, but if you hover over the button it will not render.

So: how can I display a tooltip for a disabled button?

Answer 1

An ideal solution would be cross-browser compatible, and this suggestion isn't; I've tested it only on Ubuntu 9.10, though with Chrome, Firefox, Epiphany and Opera and it seems to work reliably in those, which implies reliability in their Windows counterparts. Obviously IE is an entirely different kettle of fish.

That being said:

This idea's based on the following (x)html:

<form>

<fieldset>

    <button disabled title="this is disabled">disabled button</button>

</fieldset>

</form>

And uses the following CSS to achieve something close to your aim:

    button  {position: relative;
        }

    button:hover:after
        {position: absolute;
        top: 0;
        left: 0;
        content: attr(title);
        background-color: #ffa;
        color: #000;
        line-height: 1.4em;
        border: 1px solid #000;
        }

It's not ideal, but it was the best non-JavaScript idea I could come up with.

Answer 2

Can this be used on input tags too? It doesn't seem to work on disabled text boxes.