JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<h2>Custom Tooltip:</h2>

	<p>
  
  <a class="custom-tooltip">Hover over me to see tooltip
	  <span class="tooltipbar">Custom Tooltip </span>
	</a>
  </p>
</div>

CSS

.container{border:3px solid grey;max-width:500px;margin:0 auto;width:100%;padding:20px 0px;background:#D9DDE2;}
.container>h2,p{padding-bottom:10px;text-align:center;}
.custom-tooltip {
    position: relative;
    display: inline-block;
    text-align:center;
}

.custom-tooltip .tooltipbar {
    visibility: hidden;
    width: 170px;
    background-color: #2D7581;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 14px 0px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left:50%;
    margin-left: -60px;
}


.custom-tooltip:hover .tooltipbar {
    visibility: visible;
}
.custom-tooltip .tooltipbar::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    right: 15%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2D7581 transparent transparent transparent;
}