title: JQuery UI tooltip - opacity broken after ajax calls.
body: <p>I'm having a following problem with jQuery UI tooltip:</p>
  
  <p>Sometimes when there is an ajax call, something in the UI tooltips hangs, braking the opacity handlers.</p>
  
  <p><strong>A scenario :</strong> I have an inventory of items, some of them might be on cool-down, when this cool-down is finished the inventory is reloaded.</p>
  
  <p>When this inventory is reloaded, the <strong>tooltips are applied again</strong> (reason is to apply them to the new items in inventory).</p>
  
  <p>What sometimes happens is the tooltips stop working, and they get stuck with opacity:0 in the DOM. Screenshot below ></p>
  
  <p><img src="https://i.stack.imgur.com/eWK6R.png" alt="enter image description here"></p>
  
  <p>This results in no other tooltips working but ALSO anything that is supposed to change opacity (any fadeIn, fadeOut etc events) are broken as well.</p>
  
  <p>Could this problem be that I reapply the tooltip after every ajax call? </p>
  
  <p>Is there a way to apply the tooltips on document.ready for all the future elements as well ?(perhaps somehow with .on()?)</p>
  
  <p>Few more screenshots to understand the problem are as following:</p>
  
  <p>If I comment the opacity in the console.</p>
  
  <p><img src="https://i.stack.imgur.com/XcUZd.png" alt="enter image description here"></p>
  
  <p>It displays the tooltips but it still won't work.</p>
  
  <p><img src="https://i.stack.imgur.com/3SEY8.png" alt="enter image description here"></p>
  
  <p>The code I apply the tooltips with.</p>
  
  <pre><code>// In the done() function of the ajax call I just call
  _startTooltips();
  
  // Which does this
  function _startTooltip(){
  
   $('.item').tooltip({
      show:{
          delay:600
          },
      items: ".item",
      content : function(){
  
              var element = $(this);
  
              if(element.is('.item')){
  
                  return element.children('.item-tltp').html();
  
              }
  
          },
      position:{
          my: "center bottom-20",
          at: "center top",
      },
      track: true
  
   })
  }
  </code></pre>