JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br><br><br><br><br>sdfsdfw sfsdfsfsd fsdfsd fsdf 
<span class="disparador">Show tooltip</span>
<div class="miTooltip">
            <span class="left"></span >
          <span class="contenido">I am your tooltip</span >
            <span class="right"></span >
            <span class="bottom"></span >
</div> sdsdfsd fsdfsd fsdfsdfsdf

CSS

.disparador{cursor:pointer; color:green;}

.miTooltip{
    position: absolute;
    width: auto;
    display:block;
    height: 70px;
    color: #fff;
    padding: 20px;
    background:#000;
    display:none;
    float:left;
}
.contenido{
    font-size: 15px;
    font-weight:bold
}
.left{
    background:red;
    width: 5px;
    height: 100%;
    position: absolute;
    left: -5px;
    top: 0px;
}
.right{
    background:blue;
    width: 5px;
    height: 100%;
    position: absolute;
    right: -5px;
    top: 0px;
}
.bottom{
    background:yellow;
    height: 5px;
    width: 100%;
    position: absolute;
    right: 0px;
    bottom: -5px;
}

JavaScript

/* Detectar que el raton pasa por encima */
$('.disparador').hover(function(e) {
 //alert( $(this).next('.miTooltip').length );
    var disp = $(this);
    $('.miTooltip').css({
        left: e.pageX-($(disp).next('.miTooltip').width()/2)+'px',
        bottom: e.pageY+40+'px'
    }).fadeIn(200);
        //alert($('.ttip').height()+'px');
});
/* En caso de que se mueva el raton */
$('.disparador').bind('mousemove', function(e){
    var disp = $(this);
   $('.miTooltip').css({
        left: e.pageX-($(disp).next('.miTooltip').width()/2)+'px',
        bottom: e.pageY+40+'px'
    });
}); 

$('.disparador').mouseout(function() {
    $('.miTooltip').fadeOut(500);
});

/* why is it not centered and why is are the left, right, bottom seen?? */