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?

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. — Ved, Mar 02 '16 at 10:26
you should wrap the button into an element. after that you can activate the tooltip for the element. — Hans, Apr 20 '16 at 06:36

score 9 · Answer 1 · answered Jan 21 '20 at 19:13

9

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

answered Jan 21 '20 at 19:13

brooklynDadCore

1,309
8
13

2

Make sure to disable the pointer-events, as demonstrated in this answer. Otherwise the tooltip will not work properly: https://stackoverflow.com/a/40147917/2698694 – Connor M Jul 09 '20 at 19:43

score 3 · Answer 2 · answered Jun 08 '16 at 12:49

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>

answered Jun 08 '16 at 12:49

prograde

2,620
2
23
32

2

the downside to this is that a non-input or non-button element like tag does not care about the disabled attribute and will still be clickable. – Shahar Jun 08 '17 at 14:21
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()"` – runderworld Aug 27 '21 at 02:53

d3vtoolsmith · Answer 3 · 2016-06-23T22:12:14.200

2

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)

edited Jun 23 '16 at 22:12

answered Jun 23 '16 at 22:02

d3vtoolsmith

151
1
10

In this way you are introducing some logic in the view and this is the wrong approach for MVC applications. – smartmouse Jun 27 '16 at 14:29
just illustrating the need for the condition - trivial to place inside `doThat` – d3vtoolsmith Jul 14 '16 at 14:08

score 2 · Answer 4 · answered Jul 15 '19 at 14:35

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>

Naga Sandeep · Answer 5 · 2016-03-02T10:52:09.163

-1

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'
    });
}])

edited Mar 02 '16 at 10:52

answered Mar 02 '16 at 10:39

Naga Sandeep

1,421
2
13
26

Ehm... i tried your code but none tooltip is displayed on your disabled button. – smartmouse Mar 02 '16 at 10:42
What version of angular.js, boostrap.css and angularanimate.js are you using? What browswer? – Naga Sandeep Mar 02 '16 at 10:47
I'm trying on your plunker example. There is no tooltip on disabled button. – smartmouse Mar 02 '16 at 10:48
added screenshot for your reference – Naga Sandeep Mar 02 '16 at 10:52
Nothing here: it displays the disabled icon on the button, i tried with firefox and chrome. – smartmouse Mar 02 '16 at 11:01
The same happens on my friend's computer: no tooltip is displayed. – smartmouse Mar 02 '16 at 11:07
2

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 – Naga Sandeep Mar 02 '16 at 11:38
I'm using FF 38 and my friend has FF 44.0.2. This is very weird :( – smartmouse Mar 02 '16 at 12:52

How to display ui-boostrap tooltip on disabled button?

5 Answers5