Angular UI Bootstrap Tooltip tooltip-is-open weird behaviour
<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>