how to choose data for tooltip

how to choose data for tooltip

feederfeeder Posts: 8Questions: 3Answers: 0
edited June 2018 in Free community support

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • feederfeeder Posts: 8Questions: 3Answers: 0

    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 ?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • feederfeeder Posts: 8Questions: 3Answers: 0

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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    @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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.