JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trigger">
    <div class="tooltip">
        Hello World
    </div>
</div>

CSS

body{
    background-color: rgb(83, 110, 218);
}

.trigger{
    margin-top: 150px;
    
    position: relative;
    width:30px;
    height:30px;
    background-color: #000;
}

.trigger:hover .tooltip{
    display: block;
}
.trigger:active .tooltip{
    display: block;
}

.tooltip{
    /* Misc */
    text-align: center;
    padding-top: 20px;
    
    background-color: white;
    position: absolute;
    width:300px;
    height:50px;
    
    left: 70px;
    top:-25px;
    outline-color: white;
    outline-width: 3px;
    outline-style: solid;
    
    border-color: rgb(83, 110, 218);
    border-width: 3px;
    border-style: solid;
}

.tooltip:after, .tooltip:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	position: absolute;
	pointer-events: none;
}

.tooltip:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: white;
	border-width:20px;
	margin-top: -20px;
}
.tooltip:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: rgb(83, 110, 218);
	border-width: 26px;
	margin-top: -26px;
}