JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="da">
<div id="1" class="jHg">
    <p id="ag1" class="ag">Та самая подсказка.</p> <span>Допустим, это текст, блок или поле ввода, при наведении на которое должна появлятся всплывающас подсказка, таких блoков может быть очень много.</span>

</div>
<div id="2" class="jHg">
    <p id="ag2" class="ag">Та самая подсказка.</p><span>Допустим, это текст, блок или поле ввода, при наведении на которое должна появлятся всплывающас подсказка, таких блoков может быть очень много.</span>

</div>
<div id="3" class="jHg">
    <p id="ag3" class="ag">Та самая подсказка.</p> <span>Допустим, это текст, блок или поле ввода, при наведении на которое должна появлятся всплывающас подсказка, таких блoков может быть очень много.</span>

</div>
</div>

CSS

.da {
    padding-top:50px;
    width:500px;
    position:relative;
}
.ag {
    display:none;
    overflow: hidden;
    position: absolute;
    background: #9B9B9B;
    color: white;
    border-radius: 6px;
    box-shadow: 0px 0px 10px #000;
    padding: 5px;
    margin: -27px 0 0 0;
    right: 0px;
}
.jHg {
     background:#eee;
    padding:15px;
    margin:15px;
    box-shadow: 0px 0px 10px #000;
    border-radius:9px;
    border:2px solid white;
}

JavaScript

$(document).ready(function () {
    var first = 0;
    var last_id = 0;
    var id_now = 0;

    $(".jHg").hover(

    function () {
        id_now = this.id;

        if (first != 0) {
            $("p#ag" + last_id).fadeOut(500, function () {
                $("p#ag" + id_now).fadeIn(500);
            });
        } else {
            first = 1;
            $("p#ag" + this.id).fadeIn(500);
        }

        last_id = id_now;
    }, function () {
        $("p#ag" + this.id).fadeOut(500);

    });
})