How to enable Bootstrap tooltip on disabled button?
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;
}