CODEWITHSUNDEEP
tooltipster
Linto
Linto

Reputation: 1282

Tooltipster not working in a ajax content

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

});

Upvotes: 1

Views: 3023

Answers (2)

Miguel Santo
Miguel Santo

Reputation: 85

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.

Upvotes: 2

Linto
Linto

Reputation: 1282

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

Upvotes: 3

Related Questions