JSFiddle - React, Tailwind, and code Playground

HTML

<div><p>Fixie Williamsburg 8-bit, try-hard master cleanse small batch literally post-ironic. Pug Williamsburg small batch Schlitz, iPhone banh mi irony hella skateboard <span>Pinterest forage slow-carb</span> try-hard before they sold out cred. Craft beer keytar farm-to-table, chia twee before they sold out Marfa hella trust <a>fund</a> biodiesel. Normcore PBR <span>dreamcatcher</span> plaid, <span>XOXO</span> cornhole crucifix master cleanse fap PBR. Pickled next level <span>mlkshk</span>, cornhole Godard typewriter master cleanse flannel ethical. Etsy fixie messenger bag jean shorts, roof party hoodie aesthetic plaid yr meggings. Mumblecore <span>asymmetrical</span> semiotics DIY tattooed</p></div>

CSS

div {
    width: 400px; 
    overflow: visible;
    outline: solid 1px black;
}
span, a {
	display: inline-block;	
  color: firebrick;
	position: relative;
	border: solid 1px red;
    padding: 0;
}

span:hover::before,
a:hover::before{
	display: inline-block;	
	background:  firebrick /* rgba(0,0,0,.8)*/;
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: 'tooltip text';
	left: calc(80% - 6px);
	padding: 5px 15px;
	position: absolute;
    width: 120px;
}

span:hover::after,
a:hover::after{
	display: inline-block;	
    border: solid;
    border-color: #333 transparent;
    border-color:  firebrick transparent/* rgba(0,0,0,.8)*/;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 80%;
    position: absolute;
}