title: Angular UI Bootstrap Tooltip tooltip-is-open weird behaviour
body: <p>I use a tooltip directive from Angular UI Bootstrap inside one of my own directives. I want to manually toggle tooltip's visibility using <code>tooltip-is-open</code> attribute that Bootstrap Tooltip provides. <a href="https://angular-ui.github.io/bootstrap/#/tooltip" rel="nofollow">Angular UI documentation</a> states:</p>
  
  <pre><code>tooltip-is-open &lt;WATCHER ICON&gt; (Default: false) - Whether to show the tooltip.
  </code></pre>
  
  <p>So I assume it watches on the attribute's value. And so I want to bind a scope variable <code>tooltipIsOpen</code> to the attribute, hoping that changing <code>tooltipIsOpen</code> value in my directive's <code>link</code> function would toggle the tooltip visibility.</p>
  
  <p>The behaviour that I get is weird.</p>
  
  <ol>
  <li><p>If I bind <code>tooltipIsOpen</code> value as an expression: <code>tooltip-is-open="{{ tooltipIsOpen }}"</code>, the tooltip doesn't appear at all, though I see that the DOM is updated properly (<code>tooltip-is-open="false</code> switches to <code>tooltip-is-open="true"</code> and back again to <code>false</code>) in reaction to mouse events.</p></li>
  <li><p>If I bind <code>tooltipIsOpen</code> value as a variable: <code>tooltip-is-open="tooltipIsOpen"</code>, the tooltip apears properly after the first mouse event, but then doesn't react to any further events, staying displayed all of the time with no way to hide it.</p></li>
  <li><p>The working solution I found is bind <code>tooltipIsOpen</code> as a function call :<code>scope.tooltipIsOpenFun = function() { return tooltipIsOpen; }</code> and <code>tooltip-is-open="tooltipIsOpenFun()"</code>, or as an object property: <code>tooltip-is-open="tooltip.isOpen"</code>. Only then the tooltip works fine - shows and hides all of the time.</p></li>
  </ol>
  
  <p>I suspect it's related to how AngularJS watchers work, also to the difference in how JavaScript primitives and objects are treated when assigning the values. Still I can't understand it.</p>
  
  <p><strong>Question</strong></p>
  
  <p>Can somebody explain to me step by step why the solution <em>1</em> doesn't work and <em>2</em> works only once? </p>
  
  <p><strong>Directive template (for method <em>2</em>)</strong></p>
  
  <pre><code>&lt;div uib-tooltip="Tooltip message"
       tooltip-is-open="tooltipIsOpened"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive link function</strong></p>
  
  <pre><code>module(...).directive(..., function() {
      return {
          link: function(scope, elem, attr) {
              /* Stop further propagation of event */
              function catchEvent(event) {
                  event.stopPropagation();
              };
  
              function showTooltip(event) {
                  scope.$apply(function() {
                      scope.tooltipIsOpened = true;
  
                      /* Hide tooltip on any click outside the select */
                      angular.element(document).on('click', hideTooltip);
                      elem.on('click', catchEvent);
                  });
              };
  
              function hideTooltip() {
                  scope.$apply(function() {
                      scope.tooltipIsOpened = false;
  
                      /* Remove previously attached handlers */
                      angular.element(document).off('click', hideTooltip);
                      elem.off('click', catchEvent);
                  });
             };
  
             scope.tooltipIsOpened = false;
  
             elem.on('mouseenter', showTooltip);
             elem.on('mouseleave', hideTooltip);
          });
  </code></pre>