title: Hide tooltip after some time
body: <p>I want an effect, when someone hovers over an element, he sees a tooltip for a few seconds after which the tooltip disappears, even when the mouse is still on the element. This is what I have:</p>
  
  <pre><code>&lt;div data-sentence-tooltip="yes" data-tooltip-content: "some content"&gt; some text &lt;/div&gt;
  $('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});
  </code></pre>
  
  <p>I tried the following two, based on other related SO questions:</p>
  
  <pre><code>setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>jQuery.fn.delay = function(time,func){
      return this.each(function(){
          setTimeout(func,time);
      });
  };
  
  $('[id^="tooltip"]').delay(2000, function(){
      $('[id^="tooltip"]').fadeOut('fast');
      }
  );
  </code></pre>
  
  <p>But I think I know why none of these are working. Probably because <code>.tooltip</code> or <code>id=tooltip*</code> gets added to DOM on-the-fly.  </p>
  
  <p>Ref:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/3020998/jquery-tooltip-hide-after-time">jQuery tooltip, hide after.. time</a></li>
  <li><a href="https://stackoverflow.com/questions/18131894/jquery-tooltip-set-timeout">jquery tooltip set timeout</a></li>
  </ol>