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 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 data-toggle='tooltip'...

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.table-fit {
    width: auto !important;
    table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}



.tooltip{
  font-size: 30rem;  
}

.tooltip-inner {
color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #721c24;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

JavaScript

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