How do you render tooltip on disabled HTML Button

html button tooltip
angryITguy picture angryITguy · Jan 28, 2010 · Viewed 34.9k times · Source

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.

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?

Answer

Andrew Magee picture Andrew Magee · Aug 20, 2015

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

Related questions

tooltips for Button

Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?

Read More
trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More
How to make an input type=button act like a hyperlink and redirect using a get request?

How do I make a <input type=button> act like a hyperlink and redirect using a GET request?

Read More