Mouseover????

john.wright.ctr@usmc.mil

I'm new to Datatables and I want to a mouseover on 1 column in each row to show the contents of that cell in a "Tool Tip" type popup. How can I do that? I can get it to work on the Header row...but not the others.????

allan

Use the row().data() method to get the data for the row in question. The mouseover itself would be done like any other mouseover event in jQuery - for example:

$('#myTable').on( 'mouseenter', 'tbody tr', function () {
  var rowData = table.row( this ).data();
   // ... show tool tip
} );

Note that I've used mouseenter rather than mouseover as it is more efficient - it won't cause a redraw evertime the mouse moves over a child element. Likewise, you would probably want to use mouseleave to tidy up the tooltip.

Regards,
Allan

bindrid

Here is my version. It is slightly different than @allen . It also uses qtip2, a plugin I use for tooltips.

I would have had this up early but nmci forced me to reboot.

see it work here: http://jsbin.com/muhados/126/edit

This assumes that the tooltip is in the dataset

            table = $('#example').DataTable({

                // columns defined as noted above
                columns: columns,
                dom: "tp",
                data: dataset.data,
                // adding this is the minimum you need to do
                createdRow: function ( row, data, index ) {
                    $("td:first", row).attr("title", data.tooltip);
                }
            });

allan

That's a nice approach - thanks for posting that. Using attributes can make it easier to tap into other libraries that expect those attributes to be there and let it work with the minimum of code.

Its worth pointing that if the row's data is updated you would also need to update the attribute since createdRow is only triggered when the row is first created.

Allan