JSFiddle - React, Tailwind, and code Playground

by Alex Stulov

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="table-responsive">
                <table id="top-level-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Table</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                    </tbody>
                </table>
                <div id="edit-controls" style="display:none; position:absolute; z-index:1">
                    <button id="edit" type="button" class="btn btn-primary">Edit</button>
                    <button id="delete" type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </body>
</html>

JavaScript

$(function()
  {
  $('.list-row').mouseover(function()
                           {
    var offset = $(this).offset();
    $('#edit-controls').css({
      'top': offset.top + 10,
      'left': offset.left + 10
    }).fadeIn();
    console.log('fadein');
  });

  $('#top-level-table').mouseleave(function(event)
                                   {
    if (event.relatedTarget.id !== 'edit' &&
    event.relatedTarget.id !== 'delete' &&
		event.relatedTarget.id !== 'edit-controlls') 		{
    	$('#edit-controls').fadeOut();
    }
  });
});