1

I am using hidden column to display the tooltip for datatables. 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. I tried the solution from here but it doesn't work. How to Hide Tooltip if Value is Empty for datatables

Please see my code here - https://live.datatables.net/jebatava/3/edit

From my example, the first row should not show tool tip on Test 6, Test 7 etc columns, second row should not show tooltip on Test4, Test 5 columns. Any help/advice appreciated. Thanks.

$(document).ready(function() {
  var filtered = [];
    var table = $('#example').DataTable({
        paging: true,
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        fixedColumns: {
          left: 1},
      
      createdRow: function( row, data, dataIndex, cells ) {
  cells.forEach((cell) => {
    if (cell.innerText) {
      $(cell).attr('title', data[0]);
    }
  });
},

initComplete: function () {
      $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter ) {
            // Display rows if nothing is checked
           if (filtered.length === 0) {
             return true;
            }
      
            if (filtered.includes(searchData[1])) {
                 return true;
            }
            return false;
        }
      );
    }
  });
  
  $('.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, 1);
    }
    //console.log(filtered);
    table.draw();
  });
  
  $('#myInputTextField').on( 'keyup', function () {
    table.search( this.value ).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>


    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css"
    />

    <script
      type="text/javascript"
      src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"
    ></script>

    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="table.js"></script>

    <meta charset="utf-8" />
    <title>DataTables - JS Bin</title>
  </head>
<table class="table_brdr" style=" width: 35%;"><tbody>
<tr>
<td><input type="checkbox" class="filter" value="Joe" style=" transform: scale(1.5); margin-right: 10px; margin-left: 10px;" /></td>
<td >Joe</td>
</tr>

<tr>
<td style=" width: 1%;"><label><input type="checkbox" class="filter" value="Julie" style=" transform: scale(1.5); margin-right: 10px; margin-left: 10px;" /></label></td>
<td >Julie</td>
</tr>

<tr>
<td><input type="checkbox" class="filter" value="John" style=" transform: scale(1.5); margin-right: 10px; margin-left: 10px;" /></td>
<td>John</td>
</tr>

</tbody></table>

<input type="text" id="myInputTextField" /></div>

  <body>
    <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid"><thead>
<tr>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" white-space: nowrap;">Col1</th>
<th colspan="3" style=" white-space: nowrap;">Col2</th>
<th colspan="3" style=" white-space: nowrap;">Col3</th>
<th colspan="3" style=" white-space: nowrap;">Col4</th>
<th>Col5</th>

</tr>

<tr>
<th style=" background-color: lightgray; width: 35px; min-width: 220px; text-align: left;">Test1</th>
<th style=" background-color: lightgray;">Test2</th>
<th>Test3</th>
<th>Test4</th>
<th>Test5</th>
<th>Test6</th>
<th>Test7</th>
<th>Test8</th>
<th>Test9</th>
<th>Test10</th>
<th>Test11</th>
<th>Test12</th>
<th>Test13</th>
<th>Test14</th>
<th>&#160;</th>

</tr>

</thead><tbody>
<tr>
<td>One</td>
<td><strong>John</strong></td>
<td><strong>Yes</strong></td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>

</tr>

<tr>
<td>Two</td>
<td><strong>Julie</strong></td>
<td><strong>Yes</strong></td>
<td><strong>Yes</strong></td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>

</tr>

<tr>
<td>Three</td>
<td><strong>Joe</strong></td>
<td style=" text-align: center;">&#160;</td>
<td><strong>Yes</strong></td>
<td><strong>Yes</strong></td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>

</tr>

<tr>
<td>Four</td>
<td><strong>Shiny</strong></td>
<td><strong>Yes</strong></td>
<td><strong>Yes</strong></td>
<td><strong>Yes</strong></td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>
<td style=" text-align: center;">&#160;</td>

</tr>



       
      </tbody>
    </table>
  </body>
</html>
newuser
  • 245
  • 1
  • 1
  • 8
  • What is the difference between these two Stack Overflow posts? – CodeThing Mar 31 '23 at 12:46
  • No difference except maybe example. I tried the code, but it doesn't work. somehow earlier I thought it was working, so I accepted the answer on that post. My bad. – newuser Mar 31 '23 at 12:47
  • But there it looks like it is working. If i hover on Age column on first row, nothing shows up as expected. – CodeThing Mar 31 '23 at 12:52
  • 2
    I changed the code to this and it made it work - if (cell.innerText.trim() !== '') – newuser Mar 31 '23 at 13:07
  • 1
    Right - A string can _appear_ to be empty - but may actually contain invisible [white space](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#white_space) characters. I updated that other answer to address this. – andrewJames Mar 31 '23 at 14:13

0 Answers0