title: Hide angular-ui tooltip on custom event
body: <p>I've been looking around and trying out different things but can't figure it out. Is it possible to hide an angular-ui tooltip with a certain event?</p>
  
  <p>What I want to do is to show a tooltip when someone hovers over a div and close it when a users clicks on it because I will show another popup. I tried it with custom trigger events but can't seem to get it working. I made this:</p>
  
  <pre><code>&lt;div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites"     tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()"&gt;{{likes}}&lt;/div&gt;
  
  var app = angular.module('someApp', ['ui.bootstrap']);
  
  app.config(['$tooltipProvider', function($tooltipProvider){
   $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'hideonclick': 'click'
   });
  }]);
  
  app.controller('MainCtrl', function ($scope) {
   $scope.showTooltip = true;
   $scope.likes = 999;
  
   $scope.doSomething = function(){
      //hide the tooltip
      $scope.showTooltip = false;                                   
   };
  
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3ywMd/">http://jsfiddle.net/3ywMd/</a></p>
  
  <p>The tooltip has to close on first click and not the 2nd. Any idea how to close the tooltip if user clicks on div?</p>