JSFiddle - React, Tailwind, and code Playground

by Jason Davis

HTML

<div class="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

CSS

.item {
        position: relative;
        width: 100px;
        height: 40px;
        top: 200px;
        left: 400px;
        background: #CCC;
    }

    .item .tooltip {
        position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
        width: 80px;
        height: 30px;
        background: #06F;
        z-index: 10;
        display: none; /**let the tooltip be not visable, when startup **/
    }

JavaScript

$(document).ready(function() {

        $(".item").mousemove(function(e) { 

            // put other effect in when moving over the element

            // from e you can get the pageX(left position) and pageY(top position) 
            // im not sure if it was the relative or the absolute position
            // i added 10 pxs on the top and left to show the tooltip a bit after
            $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

        });

        $(".item").mouseout(function() { 
            $('.tooltip').css('display', 'none');
        });

    });