JSFiddle - React, Tailwind, and code Playground

by Phillip

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>

  <div title="Something that is a long sentence so I can stop it from wrapping">Something text...</div>

  <br>

  <table class="display" id="table">
    <thead>
      <tr>
        <th>Number</th>
        <th>Note</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="limit" id="hov" title="Something that is a long sentence so I can stop it from wrapping">Something that is a long sentence so I can stop it from wrapping</td>
      </tr>
      <tr>
        <td>2</td>
        <td class="limit" id="hov" title="Something that is a long sentence so I can stop it from wrapping">
          <div class="iffyTip">
            Something that is a long sentence so I can stop it from wrapping
          </div>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td class="limit" id="hov">Something that is a long sentence so I can stop it from wrapping</td>
      </tr>
    </tbody>
  </table>
</body>

CSS

.limit {
  max-width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript

$(document).ready(
  function() {
    var table = $('#table').dataTable({
      "order": [[0, "asc"]],
    });
  // Tooltip only Text
	$('#hov').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
	}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
  });
  });