JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <a target="_blank" href="https://www.google.com/">Google</a>
  <div class="tooltip">
    Tooltip
  </div>
</div>

CSS

.wrapper {
  position: relative;
}

.wrapper:hover .tooltip {
  transition: 'opacity 0.5s step-end';
  opacity: 1;
}

.tooltip {
  position: absolute;
  height: 20px;
  background-color: black;
  opacity: 0;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
}