How to enable Bootstrap tooltip on disabled button?

Question

You can wrap the disabled button and put the tooltip on the wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

http://jsfiddle.net/cSSUA/209/

This can be done via CSS. The "pointer-events" property is what's preventing the tooltip from appearing. You can get disabled buttons to display tooltip by overriding the "pointer-events" property set by bootstrap.

.btn.disabled {
    pointer-events: auto;
}

If you're desperate (like i was) for tooltips on checkboxes, textboxes and the like, then here is my hackey workaround:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

Working examples: http://jsfiddle.net/WB6bM/11/

For what its worth, I believe tooltips on disabled form elements is very important to the UX. If you're preventing somebody from doing something, you should tell them why.

Here is some working code: http://jsfiddle.net/mihaifm/W7XNU/200/

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

The idea is to add the tooltip to a parent element with the selector option, and then add/remove the rel attribute when enabling/disabling the button.

Based on Bootstrap 4

Disabled elements Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper or , ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

All the details here: Bootstrap 4 doc

These workarounds are ugly. I've debugged the problem is that bootstrap automatically set CSS property pointer-events: none on disabled elements.

This magic property causes that JS is not able to handle any event on elements that matches CSS selector.

If you overwrite this property to default one, everything works like a charm, including tooltips!

.disabled {
  pointer-events: all !important;
}

However you shouldn't use so general selector, because you will probably have to manually stop JavaScript event propagation way you know (e.preventDefault()).

In my case, none of the above solutions worked. I found that it's easier to overlap the disabled button using an absolute element as:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

Demo