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

Question

我有一个HTML按钮。我尝试根据按钮的"title"属性呈现工具提示，但它不会呈现，主要是因为按钮被禁用了。

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

悬停在被包装在span中的按钮上仍然没有效果。工具提示将呈现在span中任何不属于按钮标记的部分上。例如，如果我在span中放置一些文本以及按钮，则悬停在文本上会产生工具提示，但如果您悬停在按钮上，则不会呈现。

所以：我如何为禁用的按钮显示工具提示？

- angryITguy

---

不好意思，你想要问什么问题？ - David Thomas

我猜这不能用原始的HTML完成，需要使用JavaScript实现。 - Gazler

这里有一些JavaScript解决方案：https://dev59.com/HWYr5IYBdhLWcg3w6OGd - BPS

检查一下你的CSS是否有pointer-events: none;属性，否则可能会陷入陷阱。 - Alan Dong

Answer 1

我通过将CSS pointer-events: auto; 应用于按钮来使其起作用，尽管在 IE<11 上不支持此功能。

- Andrew Magee

---

这个解决方案存在问题，即“禁用”按钮可以被点击并触发本应被禁用的事件。 - Paul M Edwards

@PaulMEdwards 我在使用 Chrome (75.0.3770.142) 时没有遇到过这个问题。 - mwag

同意@PaulMEdwards的观点。 - CDT

不，这样的按钮仍然可以通过键盘触发（Tab键+空格键）。 - kuanyui

最新版本的Firefox和Chrome似乎都不允许使用pointer-events auto单击或切换聚焦到禁用状态的按钮，因此这个解决方案非常有效。 - phil294

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方案。

- David Thomas

---

你会在茶壶里煮鱼吗？ - Razor Storm

@Razor Storm：水壶只是一种容纳水并加热的设备。在这种情况下，“...different kettle of fish”只是英语中的一个习语，尽管它指的是一种鱼用水壶（http://chefsblade.monster.com/training/articles/97）。 - David Thomas

好的，现在我明白了。我原以为他在嘲讽用IE编程就像在一个不寻常的容器中烹饪鱼一样。 - Razor Storm

最近在查看Icedtoast的回答提供的链接后，发现了这个解决方法。不过我还没有确认它是否有效。https://bugzilla.mozilla.org/show_bug.cgi?id=274626#c16 - angryITguy

@DavidThomas 我一直在寻找禁用按钮的方法，这对我很有帮助，+1。 - SpringLearner

Answer 3

这是Firefox浏览器中的一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=274626。

- icedtoast

---

我为这个问题提供了一个 Firefox 补丁，所以希望它不会再拖很久了。 - Brian R. Bondy