JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br><br><br><br><br><br><br>
<span 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></span>

 <span 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></span>

CSS

.csstooltip {
    position: relative;

}


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

.csstooltip:hover .csstooltiptext {
   display:inline-block;
 position:absolute;
    opacity: 1;
}