https://germet.pro/t/v1070/images/js/site_addons1.js

1document.addEventListener("DOMContentLoaded", function() {
2  // Находим все элементы с классом title-block
3  const titleBlocks = document.querySelectorAll('.title-block');
4  
5  titleBlocks.forEach((titleBlock, index) => {
6    // Находим попап по индексу. Мы предполагаем, что попапы идут сразу после соответствующих блоков
7    const popapBlock = titleBlock.nextElementSibling;
8
9    // При наведении на блок .title-block
10    titleBlock.addEventListener('mouseenter', function() {
11      popapBlock.style.display = 'block'; // Показываем попап
12      setTimeout(() => {
13        popapBlock.style.opacity = '1'; // Плавно показываем попап
14      }, 10);
15    });
16
17    // При уходе с блока .title-block
18    titleBlock.addEventListener('mouseleave', function() {
19      popapBlock.style.opacity = '0'; // Плавно скрываем попап
20      setTimeout(() => {
21        popapBlock.style.display = 'none'; // После анимации скрываем попап
22      }, 300); // Время задержки соответствует времени анимации
23    });
24  });
25});