How do you render tooltip on disabled HTML Button

Question

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?

I would guess this can't be done with raw html and would require a javascript implementation. — Gazler, Jan 28 '10 at 01:23
There are some JavaScript solutions here: [http://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button][1] [1]: http://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button — BPS, Mar 21 '14 at 19:03
See if your css has `pointer-events: none;` property or not, it could be a trap — Alan Dong, Aug 30 '18 at 21:38

score 71 · Answer 1 · answered Aug 20 '15 at 08:03

71

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

answered Aug 20 '15 at 08:03

Andrew Magee

6,506
4
35
58

14

The trouble with this solution is that the "disabled" button can then be clicked and trigger the event which is supposed to be disabled. – Paul M Edwards Oct 20 '17 at 18:25
1

@PaulMEdwards I did not have that problem with Chrome (75.0.3770.142) – mwag Jul 19 '19 at 18:01
1

Agreed with @PaulMEdwards – CDT Jan 20 '20 at 03:08
No, such button still can be triggered with keyboard (tab key + space key) – kuanyui Apr 09 '20 at 03:24
1

Neither Firefox nor Chrome in their latest versions seem to allow clicking or tab-focussing a disabled button with pointer-events auto, so this solution works great. – phil294 Aug 18 '20 at 11:22

David Thomas · Accepted Answer · 2015-05-08T12:22:19.197

21

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.

edited May 08 '15 at 12:22

answered Jan 28 '10 at 02:02

David Thomas

249,100
51
377
410

Thanks for responding. I hadn't mentioned specifically, but this needs to work in IE7+. Unfortunately it doesn't. In Firefox 3.5 it changes the preformatting of my buttons. Googling around and it seems to be a real problem for many. Thanks for your efforts – angryITguy Jan 28 '10 at 10:15
No worries, I'm thinking that JavaScript's probably going to be your best bet, then. – David Thomas Jan 28 '10 at 15:26
9

You cook fish in a tea kettle? – Razor Storm Aug 11 '10 at 23:42
1

@Razor Storm: a kettle is just a piece of equipment in which water is contained while heated. In this instance '...different kettle of fish' is just an English figure of speech, though it refers to a fish-kettle (http://chefsblade.monster.com/training/articles/97) – David Thomas Aug 12 '10 at 00:22
5

Oh ok, makes sense now. I thought he was making a snide remark comparing programming for IE to cooking fish in an unconventional container. – Razor Storm Aug 12 '10 at 00:33
Recently found this workaround after looking at links provided in Icedtoast's answer. I have not confirmed if it works though. https://bugzilla.mozilla.org/show_bug.cgi?id=274626#c16 – angryITguy May 17 '11 at 03:11
@DavidThomas I have been looking for a way for the disabled button,It helped me and +1 – SpringLearner Jan 11 '14 at 06:34
@DavidsaysreinstateMonica um so, it shows **two** tooltips for me. The one from your CSS, and another one that's generated by the browser in default style (more like it's by the operating system, to be honest). What gives? https://i.imgur.com/5womuhg.png – ADTC Feb 21 '21 at 06:11

score 5 · Answer 3 · answered May 17 '11 at 02:12

5

This is a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626

answered May 17 '11 at 02:12

icedtoast

128
2
10

I provided a patch to Firefox for this issue, so hopefully it shouldn't be much longer. – Brian R. Bondy Jun 23 '11 at 02:31

How do you render tooltip on disabled HTML Button

3 Answers3

Linked