How to implement a popup tooltip on a datatables cell that displays all data

bjlap

Hi,
I am using Datatables to display a grid. One of the columns has a lot of text that does not fit in the cell. For this column I want to display the full text that is in the database for the particular column/row in a tooltip when the user hovers over the cell. I did some searches on 'datatables popup' etc. but I couldn't find a clear example of how to do this. I would like to apply bootstrap styles to the popup/tooltip. How can I best do this?
Thanks a lot for your help,
Bert-Jan

sameeralikhan

you can use a custom function inside mRender for that column.

"aoColumns": [
                {"mData": "fields.name"},
                {"mData": "id"}
            ],
"aoColumnDefs": [
            {
                "mData":"fields.name",
                "aTargets":[0],
            },
            {
                "mData":"id",
                "mRender": function(data, type, full) {
                    <write a tool tip or alert> - < all your data is in full variable>
                },
                "aTargets":[1]
            }
            ]

For Detail - check here: http://datatables.net/forums/discussion/17383/mrender-function-get-data-from-another-column

bjlap

Thanks, just what I needed. I implemented bootstrap tooltips as follows:
Note that on the datatable draw event bootstrap tooltips must be activated, otherwise no bootstrap tooltips will be displayed but 'normal' tooltips instead

                    columns: [
...
                        {
                            "data": "Comment",
                            "render": function (data, type, full, meta) {
                                return '<span data-toggle="tooltip" title="' + data + '">' + data + '</span>';
                            }
                        } 
...] 

...

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