Question

98

the tooltip in bootstrap doesn't work after ajax

rated 0 times [ 99] [ 1] / answers: 1 / hits: 17015 / 9 Years ago, mon, september 7, 2015, 12:00:00

I have a file named index.php, which in I include another file named file1.php (in index.php I include all necessary files for jQuery, js etc.).
In file1.php I have a table with buttons which each opens a modal. the information in the modal is from an ajax call for file2.php. in file2.php I create a table. In the table I have the cell :

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

and, well, the tooltip doesn't work.
but, when I copy this and get it to file1.php, bellow the table, the tooltip does work.

Can anyone help me fix the tooltip ?
Thx.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susand

Add To Favorites

Follow

Total Points: 690

Total Questions: 101

Total Answers: 104

Location: Lesotho

Member since Wed, Jun 2, 2021

3 Years ago

answered 9 Years ago kinsley · Accepted Answer

You will have to put the tooltip initialization in Ajax callback function:

$.ajax({

    method: POST,

    url: some.php

}).done(function( msg ) {

    $('[data-toggle=tooltip]').tooltip();

});

-OR-

instead of putting the initialization code in every Ajax callback function
you can implement it globally using the ajaxComplete event:

/* initializate the tooltips after ajax requests, if not already done */    

$( document ).ajaxComplete(function( event, request, settings ) {

    $('[data-toggle=tooltip]').not( '[data-original-title]' ).tooltip();

});

This code will initialize the tooltip for every node which has the data-toggle=tooltip attribute defined but do not have the attribute data-original-title (i.e tooltip not initialized).