How to Hide Tooltip if Value is Empty for datatables

Question

I am using datatables with tooltips. I am using hidden column to display the tooltip. It works fine but it shows tool tips on every cell of the table. Is there a way to hide the tooltip if the cell value is empty. Please see my example here - https://live.datatables.net/lerapaho/5/edit

From my example, the first row should not show tool tip on Age and Something columns, second row should not show tooltip on Start date and Salary. Any help/advice appreciated. Thanks.

$(document).ready(function() {

  // Just assign to the global table variable
  // Nothing else is changed in here
  table = $('#example').DataTable({
    paging: false,
    scrollX: true,
    scrollCollapse: true,
    lengthChange: false,
    searching: true,
    ordering: false,

    fixedColumns: {
      left: 1
    },
    columnDefs: [
            
            {
                "targets": [2],
                "visible": false,
                "searchable": true            }
        ],
    rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
      $(row).attr('title', data[2]);
    },
    initComplete: function() {
      $.fn.dataTable.ext.search.push(
        function(settings, searchData, index, rowData, counter) {
          // Don't display rows if nothing is checked
          if (filtered.length === 0) {
            return true;
          } else if (filtered.includes(searchData[15])) {
            return true;
          }
          return false;
        }
      );
    }
  });
  /* Nothing in here was changed */
  $('.filter').on('change', function() {
    var val = $(this).val();
    var checked = $(this).prop('checked');
    var index = filtered.indexOf(val);

    if (checked && index === -1) {
      filtered.push(val);
    } else if (!checked && index > -1) {
      filtered.splice(index, 2);
    }
    table.draw();
  });
});

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>

  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>something</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td><p>System: Architectghhghjjkjukjkj<p></td>
            <td>Edinburgh</td>
            <td></td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td></td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td><p>Director: fgghghjhjhjhkjkj<p></td>
            <td>Edinburgh</td>
            <td>45</td>
            <td></td>
            <td></td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td><p>Technical Authorjkjkjk fdfd h gjjjhjhk<p></td>
            <td>San Francisco</td>
            <td></td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td></td>
          </tr>
          
            
          </tr></tbody></table>
</div>

andrewJames · Accepted Answer · 2023-03-31T14:15:09.970

Using rowCallback means you are applying the tooltip to the entire <tr> row.

I suggest using createdRow instead of rowCallback because createdRow gives you access to each individual <td> cell in the row:

createdRow: function( row, data, dataIndex, cells ) {
  cells.forEach((cell) => {
    if (cell.innerText) {
      $(cell).attr('title', data[2]);
    }
  });
},

The expression cell.innerText is truthy if there is some text in the cell.

You could also use:

cell.innerText.trim() !== ''

This checks if the inner text is not an empty string, after removing any invisible white space characters from the start and end of the string.

Thanks to this question for the trim() improvement.

How to Hide Tooltip if Value is Empty for datatables

1 Answers1

Linked