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>

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

$('.tip_holder').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {

        var $containerWidth = $(this).width();

        var $containerHeight = $(this).height();

        var $offset = $(this).offset();

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

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

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

        $(this).mousemove(function(e) {

            var x = e.pageX - ($tipWidth / 2);
            
            var y = e.pageY - ($containerHeight * 2)
            
                $('head').append('<style type="text/css">#tooltip {position:absolute; top:' + y + 'px; left:' + x + 'px;}</style>');
            
            /*
            $('#tooltip').css({
                'top': e.pageY - ($containerHeight * 2),
                'left': e.pageX - x
            });
            */

        });

    } else {

            $('#tooltip').detach();
        
   }
});