Bootstrap 4 tooltips stop working after jQuery-pjax AJAX call

Question

I am new to javascript and can use your help. The first time my PJAX page loads, my tooltips work:

$(document).ready(function() { $(document).pjax('a', '#main', {cache: false}); $('[data-toggle="tooltip"]').tooltip(); } 

They get stuck if I do not do the following:

 $(document).on('pjax:start', function(event) { $('[data-toggle="tooltip"]').tooltip('dispose'); }); 

I tried to reinitialize them on pjax: end or pjax: no luck. I get a strange tooltip if I hang for a long time, but not a tooltip.

How to reinstall tooltips after completing XHR?

Bootstrap v4.0.0-beta.2 https://v4-alpha.getbootstrap.com/components/tooltips/

https://github.com/defunkt/jquery-pjax

Answer 1

I used a script block outside my pjax #main container. When I move the code below at the bottom of the lowest block of the script returned inside the container, life is good. The tooltip doesn’t get stuck when I use the keyboard shortcut to navigate AJAX or when I click the tooltipped checkbox. A tooltip is a tooltip for bootstrap when I first load a page and when I use AJAX to go to a page. (I'm not sure if I need to call off (), but that shouldn't hurt.)

 $('[data-toggle="tooltip"]').tooltip(); $(document).off('pjax:start'); $(document).on('pjax:start', function(event) { $('[data-toggle="tooltip"]').tooltip('dispose'); }); 

Answer 2

Is the following being done?

 $(document).ready(function() { $(document).on('pjax:success', 'a[data-pjax]', function(event) { $('[data-toggle="tooltip"]').tooltip('dispose'); $('[data-toggle="tooltip"]').tooltip(); }); $(document).pjax('a', '#main', {cache: false}); });