Datatables: add tooltip to all cells loaded dynamically

Question

I'm using datatables with FixedColumns applied on the first four columns. The columns and all cell values are loaded dynamically from json and I would like to apply some features:

1)Tooltip on the columns header. I have obtained it by adding data-html="true" data-toggle="tooltip" title= ...

2)Three column header: now in my column header I have three value, if possible I would like to have three rows for the header but I don't know how I can change str into columns iteration.

3)Cut the cell value if it is long. I have added this code to HTML page

<style>
#slTable td {
   white-space: nowrap; 
   text-overflow:ellipsis; 
   overflow: hidden; 
   max-width:1px;
}
</style>

4)Add tooltip to each cell value to show all the value if it is cutted.I have iterate each cell after the datatable initialization but the first row doesn't have tooltips, page is slow and when I go with the mouse on a value all the cell modify own size moving all the table.

This is the actual javascript code:

var tableData;
var tableName='#slTable';

$(document).ready(function (){

    jQuery.ajax({
        type : "GET",
        url : "table/"+document.getElementById("hiddenIdCar").value,
        headers: {'Content-Type': 'application/json'},  
        beforeSend: function() {
            waitingModal.showPleaseWait();
        },
        success: function(data,status,xhr){
            //No exception occurred
            if(data.success){
                tableData = data.result;
                $.each(tableData.columns, function (k, colObj) {
                    //check if parnName is not empty
                    if (colObj.parName)
                        var str = '<th data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName+'<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
                    else
                        var str = '<th data-html="true" data-toggle="tooltip" title="<b>DESCRIPTION</b>:'+colObj.description+'<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.description + '</th>';
                    $(str).appendTo(tableName+'>thead>tr');
                });
            } else {
                waitingModal.hidePleaseWait();
                notifyMessage(data.result, 'error');
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/500";
        }
    }).complete(function() {
        //initialize datatable
        if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
            var slTable = $(tableName).DataTable({
                scrollCollapse: true,
                scrollX:        true,
                scrollY:        '60vh',
                paging:         false,
                "data": tableData.data,
                "columns": tableData.columns,
                fixedColumns:   {
                    leftColumns: 4
                },
                "initComplete": function(settings){
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    }); 
                    //add timeout because otherwise user could see a too fast waiting modal
                    setTimeout(function(){
                        waitingModal.hidePleaseWait();
                    }, 1000);       
                } 
            });
        }
        else {
            slTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
        }

        //TOOLTIP test cell
        $(tableName+ ' tbody td').each( function (k, cellObj){
            this.setAttribute( 'title', cellObj.innerText );
            this.setAttribute( 'data-toggle', "tooltip" );
        });
        /* Apply the tooltips */
        slTable.$('td').tooltip( {
//          "delay": 0,
//          "track": true,
//          "fade": 250
        } );
    });     
});

The table has 300 rows and 200 columns (maybe I have to switch to server side processing). Can you help me? thanks

UPDATE 1: I have moved all the tooltip codes into initComplete and it works

"initComplete": function(settings){
                //TOOLTIP test cell
                $(tableName+ ' tbody td').each( function (k, cellObj){
                    this.setAttribute( 'title', cellObj.innerText );
                    this.setAttribute( 'data-toggle', "tooltip" );
                });
                $('[data-toggle="tooltip"]').tooltip({
                    container: 'body'
                }); 
                //add timeout because otherwise user could see a too fast waiting modal
                setTimeout(function(){
                    waitingModal.hidePleaseWait();
                }, 1000);       
            } 

Any idea about three row headers?

Answer 1

Problem is that you are trying to initialize the DataTables and the tooltips in .complete callback of ajax. Chances are that the logic in your success method is yet to be complete and you are trying to apply the Datatable and the tooltips in your complete callback. I would recommend you to wrap all your logic in the complete callback into a function and call that function after the $.each(tableData.columns loop.

Answer 2

If you run this code then it will automatically activate all the tooltips. You don't' have to worry about referencing specific ones.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})