title: how to autohide the ui-bootstrap tooltip
body: <p>I am using <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">https://angular-ui.github.io/bootstrap/</a> to display tooltip in the html page developed using AngularJS. I am able to access the tooltip-is-open attribute to show and hide the tooltip. But I am not able to achieve the same thing using a custom directive. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"&gt;&lt;/script&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;body&gt;
  
  &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
    &lt;button tooltip-placement="auto" uib-tooltip="Hide/show tooltip using directive" tooltip-trigger="'click'" tooltip-is-open="true" tooltip-auto-hide&gt;Button 1&lt;/button&gt;
    &lt;button tooltip-placement="right" uib-tooltip="Hide/show tooltip using controller" tooltip-trigger="'click'" tooltip-is-open="showHidett" tooltip-auto-hide&gt;Button 2&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var app = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
  app.controller('myCtrl', function($scope,$timeout) {
      $scope.showHidett = true;
      $timeout(function () {
           $scope.showHidett = false;
      }, 2000);
  
  });
  app.directive('tooltipAutoHide',function($timeout){
      return {
          restrict: 'A',
          scope:{
              tooltipIsOpen :'='
          },
          link: function(scope, element, attrs){
              element.on('mouseenter', function () {
                  scope.tooltipIsOpen = true;
                  $timeout(function () {
                      scope.tooltipIsOpen = false;
                  }, 2000);
              });
              element.on('mouseleave', function () {
                  scope.tooltipIsOpen = false;
              });
          }
      };
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the code the tooltip trigger for Button2 which is managed by controller is working but the tooltip trigger for Button1 which is managed by directive is not working. The working example is posted in the following plunker link <a href="https://plnkr.co/edit/0bwCpPVYDAUiQkW6oIu3?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/0bwCpPVYDAUiQkW6oIu3?p=preview</a></p>