uib-tooltip : conditionally show or hide tooltip

问题

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

回答1:

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

回答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.

回答3:

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>

来源：https://stackoverflow.com/questions/38693970/uib-tooltip-conditionally-show-or-hide-tooltip

标签

angularjs

angular-ui-bootstrap