5

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

2 Answers 2

2

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

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});
});
1
  • Thank you! I should've mentioned that I use pjax for forms, not just all my anchors. When I omit 'a[data-pjax]', I'm still left with stuck tooltips. The pjax:start block above prevents that. I also need to call tooltip() on initial page load. Commented Nov 8, 2017 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.