JSFiddle - React, Tailwind, and code Playground

HTML

<div id='teste1'>

</div><input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
</div>

CSS

#teste1{position: relative;}
.tooltip{position: absolute;}

JavaScript

$('[title]').hover(function () {
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<div class="tooltip"></div>')
            .text(title+' '+$(this).index())
            .appendTo('body')
            .fadeIn('slow');
}, function () {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
}).mousemove(function (e) {
   var elemento = document.querySelector('#teste1');
   var boxDoElemento = elemento.getBoundingClientRect();
   var rolamentoX = $('body').scrollLeft();
   var rolamentoY = $('body').scrollTop();
   var posX = e.clientX - boxDoElemento.left + rolamentoX;
   var posY = e.clientY - boxDoElemento.top + rolamentoY; 
    var mousex = posX  + -50; //Get X coordinates
    var mousey = posY  + -60; //Get Y coordinates
    $('.tooltip')
            .css({top: mousey, left: mousex});
});