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?

Autotruck

I dont think it will work as if button is disabled no event will get fired. Better is disable button using CSS by adding class. – Smaltite

you should wrap the button into an element. after that you can activate the tooltip for the element. – Tetragram

Answer 1

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

Alpert

Make sure to disable the pointer-events, as demonstrated in this answer. Otherwise the tooltip will not work properly: https://mcmap.net/q/830512/-how-to-enable-bootstrap-tooltip-on-disabled-button-using-angularjs – Corolla

Answer 2

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>

Hydrothermal

the downside to this is that a non-input or non-button element like <a> tag does not care about the disabled attribute and will still be clickable. – Elderberry

if you do this, as the first comment says, as well as another answer, you need a conditional inside the ngClick, like ng-click="isAllSelected && doThat()" – Alundum

Answer 3

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)

Balch

In this way you are introducing some logic in the view and this is the wrong approach for MVC applications. – Autotruck

just illustrating the need for the condition - trivial to place inside doThat – Balch

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> 

Marva

Answer 5

Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.

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

Please see this plunker

Added screenshot of tooltip

Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config 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'
    });
}])

Huffy

Ehm... i tried your code but none tooltip is displayed on your disabled button. – Autotruck

What version of angular.js, boostrap.css and angularanimate.js are you using? What browswer? – Huffy

I'm trying on your plunker example. There is no tooltip on disabled button. – Autotruck

added screenshot for your reference – Huffy

Nothing here: it displays the disabled icon on the button, i tried with firefox and chrome. – Autotruck

The same happens on my friend's computer: no tooltip is displayed. – Autotruck

I am using FF 44.02 and it is working. It is not working in chrome for me as well. Am not sure why though. May be it has some issues – Huffy

I'm using FF 38 and my friend has FF 44.0.2. This is very weird :( – Autotruck