Bootstrap.tooltip () "hide" event bubbles up regardless of stopPropagation ()

Our client application runs on Bootstrap 2.3.2, and due to compatibility with some older plugins, jQuery 1.8.3 is also retained.

The app is a media organizer with folders and a grid. We have a modal file manager that can be opened when inside each folder. In the module, you will see a list of all files in the folder, as well as controls for each file (move, rename, etc.). The controls are represented by icons, so for clarity, we also wanted to add Bootstrap tooltips when the user hovers over the icons.

The modal has the following jQuery code associated with it - we want to reload the page when (after) we close the modal to show any changes to files in the current folder:

// Listen for close event on file manager modal
$('#modal-manage-files').on('hide',function() {
    location.reload();
});

      

        
        
        
      

    

We have added tooltips to control icons in modal code with the following code ...

$('.file-actions i.fa').tooltip({
    animation: false
});

      

        
        
        
      

    

... or this code (none of them work):

$('.file-actions i.fa')
    .tooltip({ trigger: 'manual', animation: 'false' })
    .on({
        mouseenter: function(e) {
            e.stopPropagation();
            $(this).tooltip('show');
        },
        mouseleave: function(e) {
            e.stopPropagation();
            $(this).tooltip('hide');
        }
});

      

        
        
        
      

    

The tooltips are displayed correctly, however when I move the cursor away from one of the icons (which obviously fires the "hide" event on the tooltip) the "hide" modal event is also fired and our page reloads!

I'm still investigating if something else in our code might interfere here, but would love to share it here to see if any of you SO masters can spot what I missed.