How do you render tooltip on disabled HTML Button

I got this working by applying the CSS pointer-events: auto; to the button, though this isn't supported on IE<11.

This is a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626

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: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;
    border: 1px solid #000;
}

button {
  position: relative;
  box-sizing: border-box;
}
button:hover:after {
  position: absolute;
  top: 0;
  left: 75%;
  width: 100%;
  content: attr(title);
  background-color: #ffa;
  color: #000;
  line-height: 1.4em;
  border: 1px solid #000;
  box-shadow: 2px 2px 10px #999;
}

<form>

  <fieldset>

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

  </fieldset>

</form>

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