JSFiddle - React, Tailwind, and code Playground

HTML

<div data-tooltip="This is some information for our tooltip." class="progress3">
    </div>

CSS

.progress3 {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
    }
    
    .progress3:hover:after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(data-tooltip);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 220px;
    }
    
    .progress3:hover:before {
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }