Timed hiding of Bootstrap Tooltip does not work on rapid cursor motion

https://jsfiddle.net/d2gr1qu5/

In this fiddle I have code to hide a manual Bootstrap Tooltip on an <img> located inside a <button> after 2 sec. In addition, I also manually hide it on mouseleave at all times.

It works most of the time, but if you rapidly move the mouse cursor in/out, sometimes you'll see instances where entering the area doesn't display the tooltip initially. A symptom of the problem is that something will flicker and disappear immediately.

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});
$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});
$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
});

It's probably the timeout that kicks in. You can disable the timeout when you leave the tooltip. I made a quick and dirty solution with a global timeoutTooltip variable:

var timeoutTooltip;

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});

$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    timeoutTooltip = window.setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});

$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
    window.clearTimeout(timeoutTooltip);
});

The timeoutTooltip is used to clear the timeout when you leave the tooltip. I'm sure this can be coded nicer, but as it is it seems to work.