JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<table border="1px">
    <tr>
        <td class="test" title="Tool Tip 1">Test 1</td>
        <td class="test" title="Tool Tip 2"> Test 2</td>
        <td class="test" title="Tool Tip 3"> Test 3</td>
    </tr>
      <tr>
        <td class="test" title="Tool Tip 4">Test 4</td>
        <td class="test" title="Tool Tip 5"> Test 5</td>
        <td class="test" title="Tool Tip 6"> Test 6</td>
    </tr>
</table>

JavaScript

$( document ).tooltip({
  items: '.test',
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true);
        },
        function () {
            $(this).remove();
        }
    );
  }
});