How do i show one of the data as tool tip instead of showing in column?

istudent_learning

I have a product table and currently I am displaying returned reason in column. But what i need to do is if there is returned reason, I need to display the data as tool tip when over over product data cell. How do i achieve this in data tables.

Below are my code.

<table id="myTable">
    <thead>
        <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Description</th>
            <th>ReturnedDate</th>
            <th>ReturnedReason</th>
        </tr>
    </thead>
</table>


$(document).ready(function () {
        $('#myTable').DataTable({
            "ajax": {
                "url": "/home/loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns" : [
                    { "data": "Product", "autoWidth": true },
                    { "data": "Category", "autoWidth": true },
                    { "data": "Description", "autoWidth": true },
                    { "data": "ReturnedDate", "autoWidth": true },
                    { "data": "ReturnedReason", "autoWidth": true }
                ]
        });
    });

colin

Hi @istudent_learning ,

You can do that in columns.render like this example here.

Cheers,

Colin

istudent_learning

Hi colin, but how do i pop over the data on mouse over?

colin

If you look at that example I sent, the first column is a tooltip. There, it's using a hidden column, but you could do the same with your column.

istudent_learning

Hi colin, but data could be paragraph long, putting it as value of title attribute causing the error due to punctuation mark like apostrophe(') and (") etc

istudent_learning

another thing i have noticed is that if i have set render properties, it does not work.
"columns": [
{
"data": "Product",
"render": function (data, type, full, meta) {
if (full.ReturnedReason.length > 0) {
return "<span style='background-color:red; margin-right:10px'>" + data + "</span><i class='glyphicon glyphicon-info-sign'></i><span style='margin-left:5px;'></span>";
}
else {
return data;
}

                        },
                        "autoWidth": true
                    },

No worries, i think i did understand this part why it was not rendering.

kthorngren

You noted a couple of issues. Can you update Colin's example with examples of your data showing these issues:

putting it as value of title attribute causing the error due to punctuation mark like apostrophe(') and (") etc

have set render properties, it does not work.

Kevin

istudent_learning

Thank you very much colin. I fixed all of my issues. Thank you for guiding me.

istudent_learning

I released that tool tip does not show all contents. I.E shows less contents than Chrome.