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

Question

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

然后我尝试在一个范围中包裹按钮并设置范围的"标题"属性.

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

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

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