JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myclassIwantToHaveToolTips"><span id="AAA" data-stitle="AAA TITLE">hover here for tips</span></div>

<div class="myclassIwantToHaveToolTips"><span id="BBB" data-stitle="BBB TITLE">hover here for tips</span></div>

JavaScript

function showTooltip(x, y, contents) {
    $('<div id=\"tooltip\">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y -35, left: x -5, border: '1px solid #cde', padding: '2px', 'background-color': '#def', opacity: 0.90}).appendTo('body').fadeIn(200); 
} 

$(function(){
$(document).on({
    mouseenter: function (e) {
        showTooltip(e.pageX,e.pageY,$(this).find('span').attr('data-stitle'));
    },
    mouseleave: function () {
        $('#tooltip').remove();
    }
}, ".myclassIwantToHaveToolTips");  
    
});