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 {
    display:block;
}
.adresa__tooltip.up.opacity {
    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;
text.addEventListener("mouseover", function () {
    if (classa === null) {
        classa = adresa.className;
    }

    adresa.classList.add("up");
    setTimeout(function () {
        adresa.classList.add("opacity");
    }, 20);

}, true);
text.addEventListener("mouseout", function () {
    setTimeout(function () {
        var klasa = adresa.className.split(" ");
        adresa.classList.remove(klasa[klasa.length - 1]);
        setTimeout(function () {
            adresa.classList.remove(klasa[klasa.length - 2]);
        }, 1000);
    }, 1000);
}, true);