Tooltipster not working in a ajax content

Question

While searching in stack overflow .I find an old issue that i am facing too.But no one answered it. So just wants to know anyone have any idea about it

How to get jquery Tooltipster Plugin to work for newly created DOM elements?

Following is my code

$(document).ready(function() {
$('.test_link').tooltipster({
    interactive:true,   
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();      
        // next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'POST',
                url: 'example.php',
                success: function(data) {
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', $(data)).data('ajax', 'cached');
                }
            });
      //  }
    }
});

});

Linto · Answer 1 · 2014-04-24T09:54:10.703

My problem solved.

Just add the instantiation script in the ajax content too. also set the option multiple:true

ie

$(document).ready(function() {
$('.test_link').tooltipster({
    interactive:true, 
    multiple:true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();      
        // next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'POST',
                url: 'example.php',
                success: function(data) {
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', $(data)).data('ajax', 'cached');
                }
            });
      //  }
    }
});

});

It worked for me in Firefox.But didn't tested in other browser

score 2 · Answer 2 · edited Mar 27 '19 at 12:24

I know this is an old post, and the problem was solved, but i recently needed something similar.

Adding the initialization on every ajax function was not a solution since we had several content dynamically loaded on the page, so the simplest solution found was:

$(document).on('mouseenter', '[data-toggle="tooltip"]', function(){
        if ($(this).is('.tooltipstered')) {
            // Do nothing
        } else {
            $(this).tooltipster({
                delay: 50,
                // Your other Tooltipster options
            });
            $(this).mouseover();
        }
});

$('[data-toggle="tooltip"]') being the OP's $('.test_link').

The if deter the repeated initialization of document mouseenter.

Tooltipster not working in a ajax content

2 Answers2