Bootstrap 4 tooltips stop working after jquery-pjax AJAX call

user_7050833 0
Viewed 609

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

pjax bootstrap-4 ajax javascript
2 Answers

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');
});
user_70508330

Does the following work?

$(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});
});
user_16419410
Related