JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="tooltip" class="tip_holder"></div>

CSS

.tip_holder {
    color : #0099f9;
    font : bold 20px Arial;
    width : 400px;
    background:#000;
    border:1px #f0f;
    cursor:pointer;
    margin:100px auto 0;
}
#tooltip{
    color:#000;
    display:block;
    position:absolute;
    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);
}

JavaScript

var $tip = $("#tooltip").hide(); 
$('.tip_holder').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $tip.text($(this).text()).show();
        $(this).mousemove();
    } else {
        $tip.hide();
   }
}).mousemove(function (e) {
    var $tipWidth = $tip.width();
    var $tipHeight = $tip.height();
    var $containerWidth = $(this).width();
    var $containerHeight = $(this).height();
    var $offset = $(this).offset();
    var x = e.pageX - ($tipWidth / 2);      
    var y = e.pageY - ($containerHeight * 2)
                      
            $tip.css({
                'top': y,
                'left': x
            });
});