JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x">
    <div class="abc">abc</div>
</div>

CSS

.x {
    height: 900px;
}
.abc {
    margin-top: 300px;
}

JavaScript

var elmPosition = function (elm) {
    var x = 0,
        y = 0;

    while (elm) {
        x += (elm.offsetLeft - window.pageXOffset + elm.clientLeft);
        y += (elm.offsetTop - window.pageYOffset + elm.clientTop);
        elm = elm.offsetParent;
    }

    return {
        x: x,
        y: y
    };
};


document.querySelector('.abc').addEventListener("mouseover", function () {
    var elm = document.createElement("div");
    var position = elmPosition(document.querySelector('.abc'));
    elm.textContent = 'just a tooltip';
    elm.classList.add('tooltip');
    document.body.appendChild(elm);
    elm.style.position = 'absolute';
    elm.style.top = (position.y - 20) + 'px';

});

document.querySelector('.abc').addEventListener("mouseout", function () {
    document.body.removeChild(document.body.querySelector('.tooltip'));
})