How to display ui-boostrap tooltip on disabled button?

Question

before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.

Here is the code of my button:

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

Do you know how to make tooltip displayable even when the button is disabled?

Answer 1

Simplest, least intrusive solution to this is:

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

(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)

Answer 2

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

Answer 3

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>

Answer 4

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>