JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">
<link rel="stylesheet" href="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
    <meta charset="utf-8">
  </head>
  <body>    
    
  <table class="table table-striped table-hover tableFixHead">
  <thead class="thead-dark">
    <tr>
    <th style="width: 30%" scope='col'>Metric</th><th scope='col'>Col one</th><th scope='col'>Col two</th><th scope='col'>Col three</th><th scope='col'>Col four</th><th scope='col'>Col five</th><th scope='col'>col six</th>
    </tr>
  </thead>   
    <tbody><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='some useful info'>metric 1</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td></tr><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='some useful info'>metric 2</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td><td>0.6</td></tr><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='no info'>metric 3</td><td>0.3451644415499837</td><td>0.32830820770519265</td><td>0.3167259786476868</td><td>0.3641249580114209</td><td>0.30167844522968196</td><td>0.3543411194358748</td></tr><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='some useful info'>metric 4</td><td>0.4</td><td>0.4</td><td>0.4</td><td>0.4</td><td>0.4</td><td>0.4</td></tr><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='some useful info'>metric 5</td><td>0.2</td><td>0.2</td><td>0.2</td><td>0.2</td><td>0.1</td><td>0.1</td></tr><tr><td data-toggle='tooltip' data-placement='top' 
        data-html='true' title='some useful info'>metric 6</td><td>0.9</td><td>0.9</td><td>0.9</td><td>0.9</td><td>0.9</td><td>0.9</td></tr><tr><td...

CSS

.tableFixHead{ 
    overflow: auto; 
    height: 100px; 
    width: 240px; 
}

.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: aqua;
}

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #6a85b0;
  color: #373737;
  font-weight: bold;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 20px;
  position: absolute;
  z-index: 1;
}

JavaScript

$(function () {
    $("[data-toggle='tooltip']").tooltip();
});