title: jQuery .tooltip() don't hide when hovering over tooltip?
body: <p>I'm showing a <a href="http://api.jqueryui.com/tooltip/" rel="nofollow noreferrer">jQuery UI Tooltip</a> right in the middle of my element, when hovering. But the tooltip itself disappears when hovering over it. (<code>propagation</code> problem)</p>
  
  <p>Element:</p>
  
  <p><img src="https://i.stack.imgur.com/ENsI4.png" alt="enter image description here"></p>
  
  <p>With tooltip:</p>
  
  <p><img src="https://i.stack.imgur.com/Z6l0M.png" alt="enter image description here"></p>
  
  <p>So, when I then hover the tooltip itself, it disappears, due to a propagation problem, I suppose.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bar-wrapper"&gt;
      &lt;label class="bar-lbl active one" title="2013"&gt;&lt;span&gt;2013&lt;/span&gt;&lt;/label&gt;
  
      &lt;div class="bar" data-percent="90"&gt;&lt;/div&gt;
      &lt;div class="bar-rest-overlay" data-percent="10"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="bar-wrapper"&gt;
      &lt;label class="bar-lbl active one" title="2014"&gt;&lt;span&gt;2014&lt;/span&gt;&lt;/label&gt;
  
      &lt;div class="bar" data-percent="80"&gt;&lt;/div&gt;
      &lt;div class="bar-rest-overlay" data-percent="20"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Current code:</p>
  
  <pre><code>$('.bar-lbl').tooltip(
  {
      tooltipClass: 'bar-tooltip',
      position:
      {
          my: 'center',
          at: 'center'
      }
  });
  </code></pre>
  
  <p>Partial fix (but leaves tooltips permanently visible):</p>
  
  <pre><code>$('.bar-lbl').on('mouseleave',
  function(e)
  {
      e.stopImmediatePropagation();
  
  }).tooltip(
  {
      tooltipClass: 'bar-tooltip',
      position:
      {
          my: 'center',
          at: 'center'
      }
  });
  </code></pre>
  
  <p>Not working:</p>
  
  <pre><code>$('body').on('hover', '.ui-tooltip',
  function(e)
  {
      e.stopImmediatePropagation();
  });
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong>: Thanks to <a href="https://stackoverflow.com/a/19864086/2187401">Trevor</a>, I came to a close-solution. (it still leaves the last hovered tooltip visible when hovering out):</p>
  
  <p>It seems, when hovering out the tooltip itself, it hides. But hovering out of the <code>.bar-lbl</code> element, the tooltip stays visible, unless I hover another <code>.bar-lbl</code> element.</p>
  
  <p>The problem is in the <code>on('mouseleave')</code> event on my <code>.bar-lbl</code>. I need both lines, but they interfere with each other. (see comments)</p>
  
  <pre><code>$('.bar-lbl').on('mouseenter',
  function(e)
  {
      $('.bar-lbl').not($(this)).tooltip('close');   // Close all other tooltips
  
  }).on('mouseleave',
  function(e)
  {
      e.stopImmediatePropagation();    // keeps tooltip visible when hovering tooltip itself
      $('.bar-lbl').tooltip('close');  // I need this, but it breaks the line above, causing the tooltip to flicker
  
  }).tooltip(
  {
      tooltipClass: 'bar-tooltip',
      position:
      {
          my: 'center',
          at: 'center'
      }
  });
  
  $('body').on('mouseleave', '.ui-tooltip',
  function(e)
  {
      $('.bar-lbl').tooltip('close');
  });
  </code></pre>