Popover and Tooltip in Twitter Bootstrap are used to display small overlay of content on hover, focus or click events. For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning we must initialize them ourselves manually. With already present elements in HTML these Bootstrap JavaScript Plugins work fine but not with dynamically loading AJAX content. This article here explains the reason behind Bootstrap Popover and Tooltip not working with AJAX content and the way to let them work.
Bootstrap Popover and Tooltip with AJAX content
If we initialize either of them as per described in Bootstrap documentation:
1 2 3 4 5 6 7 | $(function () { $('[data-toggle="tooltip"]').tooltip() }) //OR $('a[rel="popover"]').popover(); |
Any function inside of $() is run when the document is first finished loading and when the “document ready” event is fired. When the code is pasted inside of the original HTML, Bootstrap Popver and Tooltip work because HTML code is present when the document finishes loading.
When it’s the response from an AJAX call, it won’t run inside of $(), because the “document ready” event already fired some time ago. So the correct way to call Popover or Tooltip when content are loaded dynamically with AJAX is:
1 2 3 | $(document).ajaxComplete(function() { $("a[rel="popover"]").popover(); }); |
Or
1 2 3 4 5 6 7 8 9 10 11 | function tool_tip() { $('[data-toggle="tooltip"]').tooltip() } tool_tip(); // Call in document ready for elements already present $.ajax({ success : function(data){ tool_tip(); // Call function again for AJAX loaded content } }) |
A Note:
Some older versions of Bootstrap had issue while displaying Popover/Tooltip in modal because the modal had greater z-index than that of the Popover or Tooltip. To deal with this issue you can assign higher z-index to these components using custom CSS rule as below:
1 2 3 | .modal .popover, .modal .tooltip { z-index:100000000; } |
But the current version of Bootstrap (v3.3.4) has already overcome this issue so Bootstrap Popover and Tooltip not working with AJAX content might be due to issue already explained earlier.
Thanks for this post — saved me some time trying to figure out why tooltips weren’t loading on ajax content
Good post .
We are magento profesional
Please hire us http://www.wireinfotech.com