Why is my setTimeout function ignoring the delay here?
<p>I am using <a href="https://clipboardjs.com/" rel="nofollow noreferrer">clipboard.js</a> and a version of Bootstrap which allows one to use <a href="http://thednp.github.io/bootstrap.native/" rel="nofollow noreferrer" title="vanilla JS">vanilla JS</a> (I am trying to use less abstractions so I can understand JS better).</p>

<p>Anyway, I noticed the first time around when I click the delay worked correctly. But the second time around it fires immediately;
<a href="https://antonioportiz.fwd.wf/" rel="nofollow noreferrer">demo</a>.</p>

<pre><code>$('.copyButton').tooltip({
    trigger: 'click',
    placement: 'bottom'
});

function setTooltip(btn, message) {
    $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
}

function hideTooltip(btn) {
    setTimeout(function() {
        $(btn).tooltip('hide');
    }, 5000);
}
/* clipboard.js */
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {

    setTooltip(e.trigger, 'Copied!');
    hideTooltip(e.trigger);
    e.clearSelection();
    console.log(e);
});
clipboard.on('error', function(e) {
    setTooltip(e.trigger, 'Failed!');
    hideTooltip(e.trigger);
    console.log(e);
});


/* preventDefault on buttons */
var btns = document.querySelectorAll('.style-guide');
for (var i = 0, l = btns.length; i &lt; l; i++) {
    btns[i].addEventListener('click', function(e) {

        e.preventDefault();
        e.stopPropagation();
    });
}
</code></pre>

<p>Anyone have any insights? I have checked similar posts but the usual problem is when someone executes the function immediately, instead of passing a reference. Like the example below.</p>

<p><code>setTimeout(foo(), 5000);</code></p>