File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!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 href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.js"></script>
<link href="https://cdn.datatables.net/searchbuilder/1.1.0/css/searchBuilder.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/searchbuilder/1.1.0/js/dataTables.searchBuilder.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css"/>
    
      <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.3/js/dataTables.colReorder.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.3/css/colReorder.dataTables.min.css"/>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  
      <a class="tooltip">Test1
      <span>TEST</span>
      </a>
  
    <body>
    <div class="container">
​
     <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
​
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}
​
.data0 {font-weight: bold;}
JavaScriptSaved
 
  
​
​
$(document).ready( function () {
  
    var table = $('#example').DataTable({
      "columnDefs": [
          {
              targets: [0],
              className: 'data0'
          }],
      dom: 'pfrlti',
​
      "ajax": "https://raw.githubusercontent.com/DataTables/DataTables/master/examples/ajax/data/arrays.txt"
​
​
    });
  
  var tooltips = document.querySelectorAll('.tooltip span');
    window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};
  
      table.on('mouseover', 'td', function () {
          var data = table.row( this ).data();
          console.log( 'You clicked on '+data[0]+'test');
          $('.tooltip span').text(data[0]+'test');
      } );
      
​
  } );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers