JSFiddle - React, Tailwind, and code Playground

HTML

Without Initial Value:
<div class="tooltip-1">
  <span>content</span>
</div>

Without changed Value:
<div class="tooltip-2">
  <span>content</span>
</div>

With BOTH ValueS:
<div class="tooltip-3">
  <span>content</span>
</div>

CSS

/* Tooltip-1 */
.tooltip-1 span {
  opacity: 0;
  transition: all .4s 4.6s;
}

.tooltip-1:hover span {
  opacity: 1;
  border: 1px solid #000;
  transition: all .4s;
}

/* Tooltip-1 */
.tooltip-2 span {
  opacity: 0;
  border: 1px solid transparent;
  transition: all .4s 4.6s;
}

.tooltip-2:hover span {
  opacity: 1;
  opacity: 1;
  transition: all .4s;
}

/* Tooltip-3 */
.tooltip-3 span {
  opacity: 0;
  border: 1px solid transparent;
  transition: all .4s 4.6s;
}

.tooltip-3:hover span {
  opacity: 1;
  border: 1px solid #000;
  opacity: 1;
  transition: all .4s;
}