JSFiddle - React, Tailwind, and code Playground

by Peter Udem

HTML

<br><br><br><br><br><br><br><br><br><br><br><br>
<div class='csstooltip'> A <span class='csstooltiptext'>sdfa sdfad adsfas dfsd dsfgsd fgdsf gsdf g df f gsd fg df gs dfg sdfas df as df as df as AAAAA</span></div>

 <div class='csstooltip'> B <span class='csstooltiptext'>sdfa sdfad adsfas dfsd dsfgsd fgdsf gsdf g df f gsd fg df gs dfg sdfas df as df as df as BBBBB</span></div>

CSS

.csstooltip {
    position: relative;
    display: inline-block;
}


.csstooltip .csstooltiptext {
width:auto;
  max-width:350px;
white-space: normal;
bottom: 100%;
visibility: hidden;
line-height:22px;
color:black;
background:white;
border:1px solid black;
padding:10px;
border-radius:15px 15px 15px 0px;
position: absolute;
z-index: 1;
left: 0%;
margin-left: 10px;
opacity: 0;
transition: all 0.7s ease-in-out;
}

.csstooltip:hover .csstooltiptext {
    visibility: visible;
    opacity: 1;
}