Bootstrap 4 tooltips stop working after jquery-pjax AJAX call

Question

I'm new to javascript and could 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 become stuck unless I do the following:

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

I've tried to reinitialize them on pjax:end or pjax:complete with no luck. I get a strange-looking tooltip if I hover a long time, but not a bootstrap tooltip.

How do I reinstall tooltips after the XHR completes?

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

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

Answer 1

I was using a script block outside of my pjax container #main. When I move the code below to the bottom of the lowermost script block returned inside the container, life is good. The tooltip isn't stuck when I use a keyboard shortcut to do an AJAX navigation or when I click on a tooltipped checkbox. The tooltip is a bootstrap tooltip when I first load the page and when I use AJAX to arrive at the page. (I'm not sure if I need the call to off() but it shouldn't hurt.)

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