Dana Dana - 12 days ago 5
jQuery Question

Add tooltip to TD in DataTable with jQuery

I have a datatable for which I bind the data trough JavaScript:

$("#TableUsage").DataTable({
data: infolist(),
ordering: true,
paginate: false,
"info": false,
columns: [
{ data: "Product", title: "Product" },
{ data: "Serial", title: "Serial" },
{ data: "App", title: "App" },
]});


The infolist looks something like:

infolist.push({Product: "01", Serial: "05", App: "M07", AppCol: "App info P01"})
infolist.push({Product: "02", Serial: "08", App: "M03", AppCol: "App info P02"})
infolist.push({Product: "03", Serial: "03", App: "M09", AppCol: "App info P03"})


Usually, in HTML I only write:

<td data-bind="text: $data.App, attr: {title: $data.AppCol}">App</td>


and the AppCol info is displayed inside a tooltip when hoovering over the App cell value.

Is there a way to add the tooltip, but using Javascript code, because right now, in HTML the table looks like this?

<table class="table" style="width: 100%;" id="TableUsage"></table>


UPDATE!

JSFiddle attached :)

Answer

Ok so you can do it by defining a render function for your column so you can output HTML for display and return the raw data for sorting/filtering. You will need to add the following to your DataTable options object:

columnDefs: [{
      targets: 2,
      render: function(data, type, full, meta) {
        if(type === 'display') {
           // Return element with title and value.  This is only returned for display
           return '<div title="' + full.AppCol + '">' + data + '</div>';
        }

        // Return raw data for sorting and filtering
        return data;
      }
    }],
    drawCallback: function(settings) {
      //Wire up tool tip here if the library won't automatically pick up new elements.
      // This fires after the draw event is completed so the DataTable is in the DOM
      // With all of it's rows.
    }

In the draw callback you can wireup your tooltip library if it won't automatically pickup new grid rows.

Comments