JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="index.css">
    
</head>
<body>
    <canvas id='chart'></canvas>
</body>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src='main.js'></script>
</html>

CSS

.custom-tooltip{
    background-color: black;
    color : white;
    position: absolute;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    padding: 6px 6px;
    font-style: normal;
    

}

JavaScript

//https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips

window.onload = function(){

    var ctx = document.getElementById('chart').getContext('2d')
    var chart = new Chart(ctx,{
        type : 'line',
        data : {
            labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets : [
                {
                    label : 'My first dataset',
                    data : [0, 10, 5, 2, 20, 30, 45]
                }
                
            ]
            
        },

        options : {
            tooltips: {
                enabled : false,
                custom : function(tooltipModel){
                    var tooltipEl = document.getElementById('custom-tooltip')
                   
                    if(!tooltipEl){
                        tooltipEl =  document.createElement('div')
                        tooltipEl.id = 'custom-tooltip'
                        
                        tooltipEl.innerHTML = '<table></table>'

                        document.body.appendChild(tooltipEl)
                    }


                    if(tooltipModel.opacity === 0){
                        tooltipEl.style.opacity = 0;
                        return;
                    }

                    tooltipEl.classList.remove('above','below','no-transform',)

                    if(tooltipModel.yAlign){
                        tooltipEl.classList.add(tooltipModel.yAlign)
                    }else{
                        tooltipEl.classList.add('no-tranform')
                    }


                    function getBody(bodyItem){
                        return bodyItem.lines
                    }

                    if(tooltipModel.body){
                        var titleLines = tooltipModel.title || []
                        var bodyLines = tooltipModel.body.map(getBody)

                        var innerHTML = '<thead>'

                        titleLines.forEach(function(title){
...