Тултипы в Zero-блоке

Кастомные тултипы с гибкими настройками

Пример решения

Десктоп-версия

Открытие по ховеру, изначально все скрыты

Мобильная версия

Открытие по клику, 1 тултип изначально открыт

1. Подготовка объектов

Шаг 1. Добавляем элементы-триггеры

Элементам, которые будут триггерами, добавляем CSS-класс «tooltip-btn» и дата-атрибут «data-tooltip»+порядковый номер

Шаг 2. Добавление элементов-тултипов

Элементам, которые будут показываться при наведении, добавляем CSS-класс «tooltip-box» и дата-атрибут «data-tooltip»+порядковый номер

Слои в Zero-блоке

Класс и дата-атрибут можно повесить как на группу, так и на отдельные элементы

2. Код в блок T123

Шаг 3. Добавляем HTML-блок и вставляем код

Показать код

<style>
.tooltip-box {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.tooltip-box.is-active {
  opacity: 1;
  pointer-events: auto;
}
</style>

<script>
(function () {

  const isDesktop = window.innerWidth >= 960;

  const btns = document.querySelectorAll('.tooltip-btn');
  const boxes = document.querySelectorAll('.tooltip-box');

  function closeAll() {
    boxes.forEach(b => b.classList.remove('is-active'));
    btns.forEach(b => b.classList.remove('is-active'));
  }

  function openTooltip(id) {
    closeAll();

    document
      .querySelectorAll('.tooltip-box[data-tooltip="' + id + '"]')
      .forEach(el => el.classList.add('is-active'));

    document
      .querySelectorAll('.tooltip-btn[data-tooltip="' + id + '"]')
      .forEach(el => el.classList.add('is-active'));
  }

  /* ===== DESKTOP — hover ===== */
  if (isDesktop) {
    btns.forEach(btn => {
      const id = btn.dataset.tooltip;

      btn.addEventListener('mouseenter', () => openTooltip(id));
      btn.addEventListener('mouseleave', closeAll);
    });
  }

  /* ===== MOBILE — click + первый открыт ===== */
  if (!isDesktop) {

    // открываем первый тултип
    openTooltip('1');

    btns.forEach(btn => {
      const id = btn.dataset.tooltip;

      btn.addEventListener('click', (e) => {
        e.preventDefault();

        const boxesForId = document.querySelectorAll(
          '.tooltip-box[data-tooltip="' + id + '"]'
        );

        const isOpen = [...boxesForId].some(b =>
          b.classList.contains('is-active')
        );

        if (isOpen) {
          closeAll();
        } else {
          openTooltip(id);
        }
      });
    });
  }

})();
</script>

3. Дополнительно

Если хочешь, чтобы первая группа на десктопе тоже была открыта изначально

Замени

if (!isDesktop) {
openTooltip('1');
}

на

openTooltip('1');

Появление на десктопе по клику

Замени

btn.addEventListener('mouseenter', () => openTooltip(id));
btn.addEventListener('mouseleave', closeAll);

на

btn.addEventListener('click', (e) => {
e.preventDefault();
openTooltip(id);
});