How do you render tooltip on disabled HTML Button

HtmlButtonTooltip

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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.

That being said:

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

<form>
    <fieldset>
    	<button disabled title="this is disabled">disabled button</button>
    </fieldset>    
</form>

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

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>

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

Solution 3 - Html

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionangryITguyView Question on Stackoverflow
Solution 1 - HtmlAndrew MageeView Answer on Stackoverflow
Solution 2 - HtmlDavid ThomasView Answer on Stackoverflow
Solution 3 - HtmlicedtoastView Answer on Stackoverflow