title: Bootstrap tooltips - dynamic delay
body: <p>How to dynamically change tooltip delay in Bootstrap?</p>
  
  <p>I have div with buttons, when i <code>.mouseenter()</code> on it first time i want a delay of 500ms, but after 500ms i want to change it to 100ms. On <code>.mouseleave()</code> i want it back to 500ms.</p>
  
  <p>Its working but with tooltip('destroy') its killing already shown tooltip. </p>
  
  <p>How to figure it out?</p>
  
  <p>here is fiddle:
  <a href="https://jsfiddle.net/0nep4tk3/2/" rel="nofollow">https://jsfiddle.net/0nep4tk3/2/</a></p>
  
  <pre><code>var $btns = $(".buttons").find('button');
  $(".buttons").on('mouseenter', function(e){
          setTimeout(function(){
              setTooltips({show:100, hide:10});
          },750);  
      }).on('mouseleave',function(){
          setTooltips({show:500, hide:100});
      })
  
  
      function setTooltips(opt){
          $btns.tooltip('destroy');
          $btns.tooltip({
              trigger:'hover',
              delay:{show:opt.show, hide:opt.hide},
              container:'body',
          }); 
      } 
  </code></pre>
  
  <p>A nice example you can find on <a href="https://webflow.com/" rel="nofollow">https://webflow.com/</a>, in their editor they have very nice tooltips for buttons.</p>
  
  <p><em>EDIT</em></p>
  
  <p>I edited fiddle for better ms and feeling what i mean.
  So, this is what i got:
  I hover BTN1 and after 500ms tooltip will appear but also after 1s i change all tooltip ms ( so i need use 'destroy') and then tooltip for BTN1 which one should still be visible (beouse my mouse is over BTN1 ) will disapear. I want him to stay after tooltips ms change. 
  I just want to get nice tooltip feeling for buttons.</p>