Angular UI $tooltipProvider setTriggers

Question

I am trying to just add a new set of triggers (show and hide) to my Angular UI tooltips. However, they do not work. How should I go about this? Here is a plunker:

http://plnkr.co/edit/ihy7PcB2kwvlJgC1QZ9p?p=preview

Relevant code is:

var app = angular.module('plunker', ['ui.bootstrap'])
.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
    'show': 'hide'
});
}]);

Thanks!

Answer 1

I updated your Plunker to make it work, making two key changes:

Dependency Order

Changing the dependency load order to load jQuery before the other scripts. I do not know exactly why that makes a difference, but it does. Before:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />

After:

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />

Using Timeout

Firing the event on timeout, a technique used in the demo referenced below. Without the timeout, I get an Angular error $apply already in progress .

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.runmef = function(eventName) {
    $timeout(function () {
      console.log("Toggling tooltip: " + eventName);
      $("#myid").trigger(eventName);
    }, 0);
  }
});

Reference

The inspiration for this was a custom tooltip event Plunker referenced in an Angular-UI issue discussion . I recommend it.