18

I want to conditionally enable/disable a tooltip on a button. I have done this to test the disable state: 

<button type="button" 
    uib-tooltip="test" tooltip-is-open="false">
</button>

But the tooltip shows. How to disable the tooltip?

Thank you

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
user1260928
  • 3,269
  • 9
  • 59
  • 105

3 Answers3

36

You can use tooltip-enable="flag" where flag is a Boolean value set in your controller based on your business logic

And here is a plunker for tool-tip enable/disable

Amit
  • 426
  • 3
  • 6
  • Thanks, Is it possible to show a tooltip on a disabled button? – user1260928 Aug 01 '16 at 09:11
  • 4
    Browsers don't fire mouse events on disabled elements, but a workaround can be to wrap your button in an external div and put your tooltip directive on this wrapper div. You would also need to style your disabled button so that its z-index is lower than this wrapper, in disabled state. I have updated the plunker. Hope it helps. – Amit Aug 01 '16 at 09:32
  • Thanks. I have copied your div/button code in my view, but when the button is supposed to be disabled, it is invisible. – user1260928 Aug 01 '16 at 09:39
  • a problem with z-index. I have changed it to 0. Button appears disabled, but tooltip not showing. – user1260928 Aug 01 '16 at 09:41
  • There would be some style issue in your code. Please verify that. Also `tooltip-is-open` works in the plunker I have shared. Please create a plunker highlighting issues you are facing. – Amit Aug 01 '16 at 09:45
2

What is the problem in it? It's clearly given in the docs with an example.

You should be using tooltip-is-open flag.

var app = angular.module("sa", ["ui.bootstrap"]);

app.controller("FooController", function($scope) {

  $scope.tooltipState = false;

  $scope.toggleTooltip = function() {
    $scope.tooltipState = !$scope.tooltipState;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController">

  <button class="btn btn-primary" type="button" uib-tooltip="Hello!" tooltip-placement="right" tooltip-is-open="tooltipState">I'll have a tooltip
  </button>
  <br>

  <br>
  <a href="" ng-click="toggleTooltip()">Toggle tooltip</a>
  <br>
  <a href="" ng-click="tooltipState = !tooltipState">Toggle tooltip without scope method</a>
</div>
Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
2

This scenario doesn't quite match up with what you were looking for, but I found that I needed to use a combination of tooltip-trigger="none" and tooltip-is-open. For example:

<form name="formName">
    <input name="inputName" type="text" required uib-tooltip="Required*" tooltip-placement="left" tooltip-trigger="none" tooltip-is-open="formName.inputName.$touched && formName.inputName.$invalid" />
</form>

Hopefully it will help someone.

Ian Yoder
  • 307
  • 3
  • 2