JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<a class="tooltip-text">text<br/>uneventext
<div class="tooltip-container">
tooltip
</div>
</a>
<br/><br/>
<a class="tooltip-text">text
<div class="tooltip-container">
tooltip
</div>
</a>
</div>

CSS

.container {
  background-color: green;
  width: 200px;
  height: 100px;
  text-align: center;
  
}
.tooltip-container {
  display: none;
  background-color: blue;
  color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
}
.tooltip-text {
  position: relative;
  background-color: yellow;
}
.tooltip-text:hover>.tooltip-container {
  display:block
}