JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span>Test</span>Once you hover this, it takes 2s for the transition to start.
</div>

CSS

span { display: none; font-size: 50%;  -webkit-animation: fadein 2s;
}
div:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: 20%;
  width: 100px;
  height: 20px;
  font-size: 12px;
  border:1px solid #0cf;
  background-color:white;
  color:#000;
  text-align: center;
  z-index:9999999;
  line-height: 20px;
  -webkit-animation: fadein 2s;
  -webkit-animation: fadeout 2s;
  text-shadow: none;
}