JSFiddle - React, Tailwind, and code Playground

HTML

<div class="adresa__obal"> <span class="adresa__text">Adresa </span>

    <div class="adresa__tooltip">
        <p style="font-family:b; margin:0;text-align:center;">Technologicko-inovační park Ostrava s.r.o.</p>
        <br>
        <p style="padding:0 20px 0 20px; margin:0;">Vratimovská 681
            <br>709 00 Ostrava-Kunčice
            <br> <a href="contact.php">Zobrazit na mapě</a>

        </p>
    </div>
</div>

CSS

.adresa__obal {
    position:relative;
}
.adresa__tooltip {
    border-radius:3px;
    background:#000;
    color:#fff;
    padding:6px;
    display:none;
    opacity:0;
    position:absolute;
    font-family:Georgia;
    width:auto;
    -webkit-transition:1s ease all;
}
.adresa__tooltip.up {
    opacity:1;
}
.adresa__obal {
    text-align:right;
}
.adresa__text {
    line-height: 100px;
}

JavaScript

var text = document.getElementsByClassName("adresa__text")[0];
var adresa = document.getElementsByClassName("adresa__tooltip")[0];
var classa = null;
var time = [];
text.addEventListener("mouseover", function () {
    time.forEach(function(element){
    window.clearTimeout(element);
    });
    adresa.style.display="block";
    setTimeout(function () {
        adresa.classList.add("up");
    }, 10);
}, true);
text.addEventListener("mouseout", function () {
    time.push(
    setTimeout(function () {
        adresa.classList.remove("up");
        time.push(
            setTimeout(function(){
            adresa.style.display="none";},1000)
        );
    },1000


              ));



    }, true);