JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div class="parent">
    <p>parent</p>
    <div class="tooltip">
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
    </div>
    </div

CSS

.parent {
    margin: 200px 50px;
}
.tooltip {
    display: none;
    position:absolute;
    left:0;
    margin-left: 20px;
    outline: 1px solid red;
}

JavaScript

var parent = document.querySelector('.parent');
var tooltip = parent.querySelector('.tooltip');
var show = function (event) {
    event.preventDefault();
    tooltip.style.display = (tooltip.style.display != 'block' ? 'block' : 'none');
    tooltip.style.top = parent.offsetTop - tooltip.offsetHeight + 'px';
};
var hide = function (event) {
    event.preventDefault();
    tooltip.style.display = (tooltip.style.display != 'none' ? 'none' : 'block');
};

parent.addEventListener('mouseover', show, false);
parent.addEventListener('mouseout', hide, false);