Bootstrap tooltip lingers when attaching to body

I have an edge case when applying bootstrap 3 tooltips to a specific div under body.

 $('body').tooltip({selector: '[data-tt="tooltip"]', container: '.spa > div:first-child', trigger: 'hover', delay: { show: 500, hide: 0 }, placement: function () {
     var position = this.$element.data('placement');
     if (typeof position !== 'undefined') {
       return position;
     } else {
       return 'bottom';
     }
}});

I apply the tooltip to a, i, input, button, divs - and it works great on hover. When I hover on input/button then click, then mouseout - the tooltip will stick on the dom if I time this edge case perfectly. I don't have site to share, but my question is how would I clean up BS3-Tooltips ON BODY if its not an option to track the history of every dom element with a tooltip?

I couldnt simply do a ...tooltip(...).on('click', function(this) { ...('hide'); } ... because the context is always body. And I need to place the tooltip inside that .spa for clearing all tooltips easily on routing.

P.S. I have tried removing animation, delays.

$('body').on('click', function () {
    $('body').tooltip('hide');
}).tooltip({selector: '[data-tt="tooltip"]', container: '.spa > div:first-child', trigger: 'hover', delay: {show: 500, hide: 0}, placement: function () {
    var position = this.$element.data('placement');
    if (typeof position !== 'undefined') {
        return position;
    } else {
        return 'bottom';
    }
}});

worked for me.