Popup when Hover a row based on the value of a hidden cell in the Datatable

aehrenwo

I have a hidden field in the data table with a decent amount of text. I am trying to create a "tooltip" or pop up that shows the contents of that field if the row has hovered over. Preferably where ever the mouse is at that time?

This is the code that is creating the table:

$(document).ready(function() {
var table = $('#faq_table').DataTable( {
      "columns": [
    { "bSortable": false, "width": "70px" }, //img
    { "bSortable": true, "widht": "100px"}, //Name Cathy S
    { "bSortable": false, "width": "125px"  }, //Responsibility Cathy S
    { "visible": false }, //Region from Cathy S List
    { "bSortable": false }, //LT Cathy S
    { "visible": false }, //Email Cathy S
    { "bSortable": false}, //GDWRegion
    { "bSortable": false }, //GDWSector
    { "bSortable": false }, //GDWCountry
    { "bSortable": false }, //RSL Mapping
    { "visible": false }, //MRC Mappings
  ],
    "dom": 'lrtip', //remove search from standard tool - to use custom one
    "bPaginate": false,
    "bInfo": false,   
    "searchDelay": 400,
    "aaSorting": [[ 1, "asc" ]], // sort Name by default 
    "initComplete": function () {
            this.api().columns([4, 6, 7, 8, 9]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );
            } );
        }
    }
     );

colin

Hi @aehrenwo ,

Yep, you can do something like this - here, column 1 (the position) is hidden, and acts as the tooltip,

Cheers,

Colin