JSFiddle - React, Tailwind, and code Playground

HTML

<div id="icis_dashboard" ></div>
<div class="tip_holder" >ToolTip holder</div>

CSS

.tip_holder {
    color : #0099f9;
    font : bold 20px Arial;
    width : 100px;
    background:#000;
    border:1px #f0f;
    cursor:pointer;
    margin:100px auto 0;
}
#tooltip{
    color:#000;
    background:#f3961c;
    width:200px;
    height:20px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-align:center;
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(top, #f9d835, #f3961c);
    background:-o-linear-gradient(top, #f9d835, #f3961c);
    background:linear-gradient(top, #f9d835, #f3961c);
}

#tooltip:after {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    z-index:-1;
    bottom:-30px; /* value = - border-top-width - border-bottom-width */
    left:50%; /* controls horizontal position */
    width:0;
    height:0;
    border-width:15px 15px; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent transparent;
}

JavaScript

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

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

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

        $(this).mousemove(function(e){
          
           var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
            
           $('#tooltip').css({
              'position':'absolute',
               'top': e.pageY - ($containerHeight + 15),
               'left': e.pageX - ($tipWidth - $containerWidth),
              'display':'block'
          });
            
        });
  },
  function() {
      $('#tooltip').remove();
  }
);