如何在禁用的 HTML 按钮上呈现工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2151575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you render tooltip on disabled HTML Button
提问by angryITguy
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.
我有一个 HTML 按钮。我试图根据按钮的“标题”属性在其上呈现工具提示，但它没有呈现。主要是因为它被禁用了。
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.
将鼠标悬停在包裹在 span 中的按钮上仍然无效。工具提示将呈现在不属于按钮标记的范围内的任何其他部分。就像我在 span 和按钮中放置一些文本一样，将鼠标悬停在文本上会产生工具提示，但如果将鼠标悬停在按钮上，它将不会呈现。
So: how can I display a tooltip for a disabled button?
那么：如何为禁用的按钮显示工具提示？
采纳答案by David says reinstate Monica
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.
一个理想的解决方案是跨浏览器兼容，而这个建议不是；我只在 Ubuntu 9.10 上测试过它，尽管使用 Chrome、Firefox、Epiphany 和 Opera 并且它似乎在那些中可靠地工作，这意味着它们在 Windows 中的可靠性。显然，IE 是一个完全不同的鱼缸。
That being said:
话虽如此：
This idea's based on the following (x)html:
这个想法基于以下 (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:
并使用以下 CSS 来实现接近您的目标：
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.
这并不理想，但它是我能想到的最好的非 JavaScript 想法。
回答by Andrew Magee
I got this working by applying the CSS pointer-events: auto;to the button, though this isn't supported on IE<11.
我通过将 CSSpointer-events: auto;应用于按钮来实现此目的，尽管 IE <11 不支持此功能。
回答by icedtoast
This is a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626
这是 Firefox 中的一个错误：https: //bugzilla.mozilla.org/show_bug.cgi?id =274626
回答by Martin Dimitrov
Don't use disabled. Use "readonly" instead!
不要使用禁用。改用“只读”！
