JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<table class="tooltipTable" style="position:absolute;">
    <tr><td>row1 </td></tr>
    <tr><td>row2</td></tr>
</table>

<br/><br><br>
<table border="1">
<tr>
<td class="sample-two">Data1 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>

<tr>
<td class="sample-two">Data2 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>

<tr>
<td class="sample-two">Data3 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table>

CSS

.ui-tooltip-content td{
    border:1px solid #00c!important;
}

JavaScript

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(1000, 1);
            },

            function () {
                $(this).stop(true).fadeOut(200, function () {
                    $(this).remove();
                })
            });
        },
        position: {
            my: "left",
            at: "right"
        }
    });
});

$(function () {
  $('.one').attr('title', $('.tooltipTable').remove().html());
  $(document).tooltip();
});