JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">Welcome <span class="wrapper">[?]<span class="tooltip">I am a tooltip!</span>
  </span>
</div>

CSS

.wrap{
    margin-top: 100px;
}
.wrapper {
  text-transform: uppercase;
  cursor: help;
  position: relative;
  text-align: center;
}

.wrapper .tooltip {
  background: #1496bb;
  top: 0;
  color: #fff;
  display: block;
  left: 20px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 200px;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

  
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}