Bootstrap tooltips don't work in page different from the first of datatables

Question

I'm developing several datatables where the cells of some columns have bootstrap tooltips. So i'm using:

• Bootstrap framework
• Datatables.

The Datatables is organized in several pages. When the document is ready and the table is loaded, in the first page of the datatables the tooltips are working fine, but the cells of the nexts pages have no tooltips!

How can I solve this problem?

Answer 1

SOLUTION

You need to use drawCallback to initialize tooltips every time DataTables redraws the table. This is needed because TR and TD elements for pages other than first are not present in DOM at the time first page is displayed.

DEMO

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        ajax: 'https://api.myjson.com/bins/qgcu',
        drawCallback: function(settings){
            var api = this.api();
            
            /* Add some tooltips for demonstration purposes */
            $('td', api.table().container()).each(function () {
               $(this).attr('title', $(this).text());
            });

            /* Apply the tooltips */
            $('td', api.table().container()).tooltip({
               container: 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.