how to choose data for tooltip

feeder

Hi,

I'm using datable with json data. I would like to add a tooltip with an information presents ('description') in my json.
How it's possible ? my tooltip always display the same data presents in the row (in my case the 'name' not the 'description').

My code :

table = $('#referenceTable').dataTable( {
    data : json,
    columns: [
        {"data" : 'id'},
        {"data" : 'Client'},
        {"data" : 'type_object'},
        {"data" : 'name'}            
    ],
    columnDefs: [
        { width: 50, targets: 0 },
        { width: 150, targets: 2 },
        { "data": 'description',
          "render": function (data, type, full, meta) {
            return '<span data-toggle="tooltip" title="' + data + '">' + data + '</span>';
        },
        "targets":3
     }]

});

$('#referenceTable').on('draw.dt', function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Thanks in advance ;-)

colin

Hi @feeder ,

I'm not following your thoughts there, sorry. You said that the tooltip is displaying the same as the data, but it would because you have this:

```
"tooltip" title="' + data + '"
````

It might be easier if you created a live example and explained from there what you're after. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

feeder

My Json object contains some fields : "id", 'client', "type object", "name", "description".
On my datatable, I display id, client, type object, and name on 4 columns. But the last field "description" I would like to be a tooltip on the name column.
I understand the problem is "data" because it's link to the "name column with "targets":3, but how its 'possible change the data to get the description field ?

colin

Hi @feeder ,

I understand. By the time you get to the columns.render function, you would've lost the JSON data. In this example here, I've added the salary field (description in your case) but kept it hidden - that way it's still accessible in the render (hover over the 'Name' column and you'll see the salary as the tooltip.

Cheers,

Colin

feeder

It's working fine, thank you very much ! nice ;-)

vaishnavkoka

@colin,
i have been through your example : live.datatables.net/xecowonu/1/edit
can we make a tooltip without creating an extra column(hidden column)?
if yes how do we do that ?
for example: if name=="Airi Satou" // a tooltip should be displayed
else if name=="Ashton Cox" // another tooltip should be displayed
(whenever a criteria is met then only a tooltip should be displayed)
I have used the below code :
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { if (aData[1] == "completed.txt") { $('td:nth-child(4)', nRow).css('background-color', 'Green'); } else if (aData[3] == "failed.txt") { $('td:nth-child(4)', nRow).css('background-color', 'Red'); } else if (aData[3] == "in-progress.txt") { $('td:nth-child(4)', nRow).css('background-color', 'Orange'); } else if (aData[3] == "pending.txt") { $('td:nth-child(4)', nRow).css('background-color', 'Yellow'); } else if (aData[3] == "stopped.txt") { $('td:nth-child(4)', nRow).css('background-color', 'Brown'); } else if (aData[3] == "running") { $('td:nth-child(4)', nRow).css('background-color', 'blue'); } }

instead it changes the background color of the cell when the criteria is met.

colin

That was just using the hidden column as part of the example - it doesn't need to be - you can put anything into that <div>

Colin