Ukazanie diva onhover przy użyciu Vanilla JavaScript

Cześć, szybkie pytanie (chyba :D), chce zrobić takie coś, że przy najechaniu na myszką na danego diva, ukaże się po paru sekundach (po 2 przykładowo) kolejny, inny (taki jakby opis).
Niestety, wiele poradników korzysta z jQuery i teraz mame pytanie, czy korzystanie z opcji setTimeout jest rozwiązaniem aby dodać "delay"?

await new Promise(r => setTimeout(r, 2000));

Chociaż to też stworzy pewien problem.
Czy kolejnym elementem rozwiązania będzie dodanie eventu 'mousemove' i dodaniu stylu temu divu "visible" a jak wyjdzie to "hidden"? Wydaje się okey, tylko nie wiem jak zrobić klauzule, "jeśli nie ma myszki w tym miejscu to ukryj div".

Potrzebuje tylko wskazówki z czego skorzystać, a z jQuery nie chce skorzystać.

A jak weźmiesz z niego myszkę to ma zniknąć od razu, czy też po 2 sekundach?

I ma wyniknąć ładnie, płynnie, czy po prostu zrobić pyk i się pokazać?

No jeśli płynnie, to skorzystaj z CSS :hover oraz transition, a jeśli pyk, to JavaScript, event onhover oraz setTimeout().

Oczywiście w JavaScript musisz obsłóżyć przypadek że ktoś najdzie myszka a potem ją weźmie przed upływem 2 sekund.

Disclaimer: tutaj masz wytłumaczone eventy mouseover/out vs mouseenter/leave. Uzyłem tych ostatnich, żeby tooltip nie znikał jak najadę na niego myszką.

Do samego efektu pojawiania nie potrzebujesz JS'a. Można to zrobić cssem. Użyj JS tylko do tego, żeby dodać klasy.

JSFiddle

const tooltips = [...document.querySelectorAll('[data-tooltip]')];

tooltips.forEach(tooltip => {
  const tooltipEl = document.createElement('div');
  tooltipEl.classList.add('tooltip');
  tooltipEl.innerText = tooltip.dataset.tooltip;
  tooltip.appendChild(tooltipEl);

  tooltip.addEventListener('mouseenter', () => {
    // Tu stosujemy pewien trick
    // Nie możemy jedną klasą zrobić display: block i opacity: 1,
    // Dlatego, że nie będzie efektu płynnego pojawiania się
    // transition nie działa jak element ma display: none i przejdziemy na opacity:1 display: block
    // Dlatego najpierw dodajmy klase tooltip--visible, która powoduje,
    // że element ma display: block (ale wciąż opacity: 0, więc jeszcze go nie widać),
    // a później po chwili dopiero dodajemy klasę z opacity: 1
    tooltipEl.classList.add('tooltip--visible');

    setTimeout(() => tooltipEl.classList.add('tooltip--in'));
  });

  tooltip.addEventListener('mouseleave', () => {
    // Tutaj jest odwrotność tego, co na górze
    // Najpierw zabieramy klasę z opacity: 1,
    // więc element płynnie znika, a dopiero jak zniknie, to dajemy display: none;
    tooltipEl.classList.remove('tooltip--in');

    setTimeout(() => tooltipEl.classList.remove('tooltip--visible'), 250);
  });
});

Nie wiem, czy taki miał być efekt, ale mając ten kod na bank sobie go przerobisz do swoich potrzeb :)