JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
</div>
<div class="actionbuttons">
    
    
</div>

CSS

.actionbuttons
{
    position:absolute;
    width: 150px;
    height: 30px;
    background: #f00;
    display:none;
}

JavaScript

$('tbody tr').on('mouseover',function(){
var rowPosition = $(this).position();
    var targetPosition = {
        top: rowPosition.top,
        left: rowPosition.left + $(this).width()
    }
    $('.actionbuttons').css(targetPosition);
    $('.actionbuttons').show();
});

$('tr').on('mouseout',function(){
    $('.actionbuttons').hide();
});