如何在禁用的 HTML 按钮上呈现工具提示

我有一个 HTML 按钮。我曾经尝试过基于按钮的“ title”属性在上面渲染一个工具提示，但是它没有渲染。主要是因为它被禁用了。

然后，我尝试将按钮包装在 span 中，并设置 span 的“ title”属性。

将鼠标悬停在包装在 span 中的按钮上仍然没有效果。工具提示将在跨度中不属于按钮标记的任何其他部分上呈现。就像我在 span 和按钮上放一些文本一样，将鼠标悬停在文本上会产生工具提示，但是如果你将鼠标悬停在按钮上，它将不会呈现。

那么: 如何显示禁用按钮的工具提示？

45835 次浏览
小开
最佳答案

一个理想的解决方案应该是跨浏览器兼容的，但是这个建议并不适用。我只在 Ubuntu 9.10上测试过，不过在 Chrome，Firefox，Epiphany 和 Opera 上都测试过，而且在这些浏览器上都能可靠地工作，这意味着它们在 Windows 平台上都是可靠的。显然 IE 是一个完全不同的概念。

话虽如此:

这个想法基于以下(x) html:

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

并使用下面的 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>

这并不理想，但是它是我能想到的最好的非 JavaScript 创意。

小开

这是 Firefox 中的一个 bug: https://bugzilla.mozilla.org/show_bug.cgi?id=274626

小开

我通过在按钮上应用 CSS pointer-events: auto;来实现这个功能，尽管 IE < 11不支持这个功能。


提交答案