JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="header"><h1 class="entip entip-right" data-entip="fuck you"> Bro </h1></div>

CSS

.entip {position:relative;display:inline-block;}
.entip:before, .entip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}	
.entip:hover:before, .entip:hover:after {opacity:1;}
.entip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}		
.entip:after {content:attr(data-entip)!important;background:#2e3233;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.entip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#2e3233;}
.entip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}
.entip-bottom:before {top:100%;left:50%;margin:-6px 0 0 0;border-bottom-color:#2e3233;}
.entip-bottom:after {top:100%;left:50%;margin:6px 0 0 -10px;}
.entip-right:before {left:100%;bottom:50%;margin:0 0 -4px 0;border-right-color:#2e3233;}		
.entip-right:after {left:100%;bottom:50%;margin:0 0 -13px 12px;}
.entip-left:before {right:100%;bottom:50%;margin:0 0 -4px 0;border-left-color:#2e3233;}		
.entip-left:after {right:100%;bottom:50%;margin:0 8px -13px 0;}