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

Question

我有一个 HTML 按钮。我尝试根据按钮的“标题”属性在其上渲染工具提示，但它没有渲染。主要是因为它被禁用了。

然后我尝试将按钮包装在跨度中并设置跨度的“标题”属性。

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

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

Answer 1

我通过将 CSS

pointer-events: auto;

应用到按钮来实现此功能，尽管 IE 不支持此功能<11.

Answer 2

理想的解决方案是跨浏览器兼容，但这个建议不是；我只在 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 想法。

Answer 3

这是 Firefox 中的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=274626