Question

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

然后我尝试在一个范围中包装按钮并设置范围的“标题”属性。

将鼠标悬停在跨度中包含的按钮上仍无效。工具提示将在跨度的任何其他部分呈现，而不是按钮标记的一部分。就像我在跨度和按钮中放置一些文本一样，将鼠标悬停在文本上会生成工具提示，但如果将鼠标悬停在按钮上则不会渲染。

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

Answer 1

我通过将CSS pointer-events: auto;应用于按钮来实现此功能，但IE＆lt; 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

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

3 个答案: