Our customer's application is running on Bootstrap 2.3.2, and because of compatibility with some old plugins also still jQuery 1.8.3.
The application is a media file organizer with folders and a grid view. We have a file manager modal that can be opened when inside each folder. In the modal you will see a list of all the files in the folder, as well as controls for each file (move, rename, etc.). The controls are represented by icons, so for the sake of clarity we also wanted to add the Bootstrap tooltips when the user hovers on the icons.
The modal has the following jQuery code tied to it – we want to reload the page when (after) closing the modal to show any changes to the files in the current folder:
// Listen for close event on file manager modal
$('#modal-manage-files').on('hide',function() {
location.reload();
});
We've added the tooltips to the control icons in the modal with the following code...
$('.file-actions i.fa').tooltip({
animation: false
});
... or this code (neither of them works):
$('.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 show properly, however when I move the cursor away from one of the icons (which obviously triggers the 'hide' event on the tooltip) the modal 'hide' event also triggers and our page reloads!
I'm still investigating if there could be something else in our code that's interfering here, but wanted to put this up here to see if any of you artisans of SO might spot something that I've missed.
