JSFiddle - React, Tailwind, and code Playground

HTML

<div id='foo'>Foobar</div>

CSS

.tooltip {
    border: 1px solid rgb(153, 188, 232);
    border-radius: 4px;
    background-color: white;
    position: absolute;
    z-index: 2;
    padding: 3px;
}

JavaScript

var tooltipPosition = function (event, x, y) {
        $('div.tooltip').css({
            top: event.pageY + 10,
            left: event.pageX - 10
        });
    };

    var tooltipShow = function (event, content, x, y) {
        $('div.tooltip').remove();
        $('<div class="tooltip"><ul><li>foo</li><li>bar</li><li>fubar</li></ul></div>')
            .appendTo('body');
        tooltipPosition(event, x, y);
    };

    var tooltipHide = function (event) {
        $('div.tooltip').remove();
    }


    $("#foo").bind({
        mousemove: tooltipPosition,
        mouseenter: tooltipShow,
        mouseleave: tooltipHide
    });