html按钮tooltip无法显示,如何在禁用的HTML按鈕上呈現工具提示

I have a HTML button. I have tried to render a tooltip on it based on the "title" attribute of the button and it doesn't render. Mainly because it's disabled.

我有一個HTML按鈕。我試圖根據按鈕的“title”屬性渲染工具提示，但它不會渲染。主要是因為它被禁用了。

I then tried wrapping the button in a span and setting the "title" attribute of the span.

然后我嘗試在一個范圍中包裝按鈕並設置范圍的“標題”屬性。

Hovering over the button that is wrapped in the span still has no effect. The tooltip will render on any other part of the span that is not part of the button tag. Like if I put some text in the span as well as the button, hovering over the text produces the tooltip, but if you hover over the button it will not render.

將鼠標懸停在跨度中包含的按鈕上仍無效。工具提示將在跨度的任何其他部分呈現，而不是按鈕標記的一部分。就像我在跨度和按鈕中放置一些文本一樣，將鼠標懸停在文本上會生成工具提示，但如果將鼠標懸停在按鈕上則不會渲染。

So: how can I display a tooltip for a disabled button?

那么：如何顯示禁用按鈕的工具提示？

3 个解决方案

#1

12

An ideal solution would be cross-browser compatible, and this suggestion isn't; I've tested it only on Ubuntu 9.10, though with Chrome, Firefox, Epiphany and Opera and it seems to work reliably in those, which implies reliability in their Windows counterparts. Obviously IE is an entirely different kettle of fish.

一個理想的解決方案是跨瀏覽器兼容，這個建議不是;我只在Ubuntu 9.10上進行了測試，雖然使用Chrome，Firefox，Epiphany和Opera，它們似乎在那些中可靠地運行，這意味着它們在Windows對應物中具有可靠性。 IE顯然是一個完全不同的魚。

That being said:

話雖如此：

This idea's based on the following (x)html:

這個想法基於以下(x)html：

disabled button

And uses the following CSS to achieve something close to your aim:

並使用以下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;

}

disabled button

It's not ideal, but it was the best non-JavaScript idea I could come up with.

它並不理想，但它是我能想到的最好的非JavaScript想法。

#2

25

I got this working by applying the CSS pointer-events: auto; to the button, though this isn't supported on IE<11.

我通過應用CSS指針事件來實現這一點：事件：auto;到按鈕，雖然IE <11不支持。

#3

5

這是firefox中的一個錯誤：https：//bugzilla.mozilla.org/show_bug.cgi？id = 274626