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, in any case, none of them used uib-tooltipfrom angular ui bootstrap .

Here is the code for 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 the tooltip displayed even if the button is disabled?

Answer 1

I don't think this is possible on a button, but it works if you use a 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 2

, :

<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>

( ng-click, , "" - , )

Answer 3

, , - .

, <span> uib:

<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>

, , , <span>.

<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> 

Answer 4

, , uib. .

<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>

plunker

Additional notes: You can also adjust the position of the tooltip. All you have to do is take care of yourself $uibTooltipProvider. Then we can use the configuration section to achieve the result. Below code is included in the plunker.

angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
    $uibTooltipProvider.options({
        'placement':'bottom'
    });
}])