html按钮tooltip无法显示,How do you render tooltip on disabled HTML Button

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:

disabled button

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;

}

disabled button

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