Datatables and tooltips 2

by jmeile

HTML

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th class="desktop tablet-l">Position</th>
      <th class="desktop tablet-l">Office</th>
      <th class="desktop tablet-l">Age</th>
      <th class="desktop tablet-l">Start date</th>
      <th class="desktop tablet-l">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon
      </td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen...

CSS

/* This is not really necessary
 * On the real page, the height of the body will be 
 * given by the content
 */
 /*
html, body {
  min-height: 2000px;
}
*/

.jm-tooltip {
  position: relative;
  display: inline-block;
  
  /* This attributes are optional
   * They are only to make it looking as a link
   */
  cursor: pointer;
  outline: none;
  border-bottom: 1px solid blue;
}

.jm-tooltip .jm-tooltiptext {
  width: 400px;
  height: 188px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  
  /* The tooltip box will be 125% above from the bottom */
  bottom: 125%;
  /* The tooltip will beging exactly on the left */
  left: 0%;
  
  /* This can be use to displace it by some pixels */
  /*margin-left: -60px;*/
  
  display: none;
  overflow-y: scroll;
  
  /* This attributes are optional */
  text-align: left;
  font-family: "DINPro",helvetica,arial,sans-serif;
  font-size: 16px;
  text-rendering: optimizelegibility;
  background-color: #777;
  color: #000;
  border-radius: 6px;
  box-shadow: 5px 5px 10px grey;
  cursor: text;
}

.jm-tooltip:after {
  display: none;
}

.jm-tooltip.show:after {
  content: "";
  position: absolute;
  
  /* this three properties determine the position of the arrow */
  
  /* Arrow will be 85% up from the bottom */
  /*bottom: 85%;*/
  top: -6px;
  /* And then a little bit at the left */
  /*left: 30%;*/
  left: 15px;
  
  border-width: 8px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  display: inline-block;
}

@media only screen and (max-width: 400px) {
  .jm-tooltip .jm-tooltiptext {
    width: 200px;
  }
}

JavaScript

$(document).ready(function() {
  var my_table = $('#example').DataTable( {
    "pageLength": 10,
    dom: 'lfrtip',
    order: [],
  } );
  
  $('#example').on("click", '.jm-tooltip', function(e) {
    e.stopPropagation();
    hide_tooltips($(this));
    $(this).children(".jm-tooltiptext").toggle();
    $(this).toggleClass("show");
  });
  
  $('#example').on("click", '.jm-tooltiptext', function(e) {
    e.stopPropagation();
  });

  function hide_tooltips(current_tooltip) {
    $('.jm-tooltip').each(function() {
      if ((current_tooltip == null) || (!$(this).is(current_tooltip))) {
        $(this).children(".jm-tooltiptext").css('display', 'none');
        if ($(this).hasClass("show")) {
          $(this).removeClass("show");
        }
      }
    });
  }

/*
  $('body').on('click', function(e) {
    hide_tooltips();
  });
 */

 $(document).on('click',function(){
    hide_tooltips();
 });

} );