JSFiddle - React, Tailwind, and code Playground

HTML

<div id="icis_dashboard" ></div>
blah blah<br/>
blah blah<br/>

<center><div class="tip_holder" >ToolTip !!</div></center>

blah blah<br/>
blah blah<br/>

CSS

.tip_holder {
    color : #0099f9;
    font : bold 20px Arial;
    width : 100px;
    background:#000;
    border:1px #f0f;
}
#tooltip{
    color:#f0f;
    background:#2f2f2f;
    width:200px;
    height:20px;
    border:1px solid #000;
    display:none;
    text-align:center;
    font : bold 15px verdana;
}

JavaScript

$(".tip_holder").hover(
  function() {
      
      var $containerWidth = $(this).width();
      var $offset = $(this).offset();

      $('#icis_dashboard')
          .prepend('<div id="tooltip">' + $(this).text()  + '</div>');
      

      var $tipWidth = $('#tooltip').width();

      var $tipHeight = $('#tooltip').height();

      $('#tooltip').css({
          'top': $offset.top - ($tipHeight + 15),
          'left': $offset.left - ($tipWidth - $containerWidth  ) /2 ,
           'position':'absolute',
          'display':'block'
      });

  },
  function() {
      $('#tooltip').remove();
  }
);