how to choose data for tooltip
how to choose data for tooltip
feeder
Posts: 8Questions: 3Answers: 0
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 ;-)
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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
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 ?
Hi @feeder ,
I understand. By the time you get to the
columns.renderfunction, 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
@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.
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