How to display ui-boostrap tooltip on disabled button?

Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.

<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">   <button disabled="isDisabled">Button</button></div>

The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.

This solution will also work if you are using the title attribute instead of uib-tooltip

I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:

<a class="btn btn-default"   uib-tooltip="My tooltip text"   tooltip-append-to-body="true"   ng-disabled="!isAllSelected"   ng-click="doThat()">Click Here</a>

I know this question is several years old however someone might find useful this workaround.

What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:

<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">    <span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span></button>

If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.

<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">    <span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span></button>