title: Disaible open uib-tooltip when any other tooltip is clicked
body: <p>I am trying to create 3 tooltips  in a page, Its not working , only one tooltip should be open on click anyother tooltip should be closed.</p>
  
  <pre><code> angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
  $scope.tooltip = {
              1: false,
              2: false,
              3: false
          };
  
  $scope.tooltipCloseActive = function(activeTooltip) {
              console.log($scope.tooltip);
  
              _.set($scope.tooltip, activeTooltip, true);
              _.forOwn($scope.tooltip, function(value, key) {
                  console.log(value+'*************'+key);
                  if(activeTooltip !== key &amp;&amp; value === true){
                      console.log('#'+key);
                      _.set($scope.tooltip, key, false);
                      $scope.triggerClickOnTooltip(key);
                      console.log(key);
                  }
              });
          };
  
          $scope.triggerClickOnTooltip = function(id) {
              setTimeout( function(){
  
                  angular.element(document.querySelectorAll('#'+id)).trigger('click');
              }, 100);
          };
  
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-xs-10 col-sm-4"&gt;
  
                  &lt;p id="1" tooltip-trigger="click"
                     uib-tooltip="I am a tooltip 1." ng-click="tooltipCloseActive('1');"&gt;
  
                      &lt;span&gt;tooltip 1:&lt;/span&gt;
                  &lt;/p&gt;
           &lt;br&gt;
                  &lt;p id="2"   tooltip-trigger="click"
                     uib-tooltip="I am a tooltip 2." ng-click="tooltipCloseActive('2')"&gt;
  
                      &lt;span &gt;tooltip 2:&lt;/span&gt;
                  &lt;/p&gt;
          &lt;br&gt;
                  &lt;p id="3" tooltip-trigger="click"
                     uib-tooltip="I am a tooltip 3." ng-click="tooltipCloseActive('3')"&gt;
  
                      &lt;span&gt;tooltip 3:&lt;/span&gt;
                  &lt;/p&gt;
         &lt;br&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have written code for multiple ui tooltips and want to close other tooltips when one of the tooltip is clicked.</p>
  
  <p>It is going into infinite loop so when I am triggering click .</p>
  
  <p>Just want to know how to make it work :</p>
  
  <p>Possible Solution :
  1) Differentiating the user click and trigger click :
  I was not able to differentiate (I know how we can do in jquery but not in angular)</p>
  
  <p>2) Use tooltip flags ( which I did it didn't work)</p>
  
  <p>3) Upgrading ui bootstrap and use outsideClick (Which I cant afford doing in our application right now)</p>
  
  <p>Is there any way I can solve this mystery of enable only one tooltip at a time.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>PLUNKER : <a href="http://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview" rel="nofollow">http://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview</a></p>