Интересный h1

Интереснейший подзаголовок

Интереснейшее описание

Я задал ссылки (#nda и #rid в моем случае) словам и к ним подклчюается тултип)

Работа с кодом

РИД

NDA

Дизайн и айдентика

.tooltip.show {
    opacity: 1;
}
</style> <script>
(function() {
  // Создаем тултипы
  const tooltipRid = document.createElement('div');
  tooltipRid.className = 'tooltip';
  tooltipRid.textContent = 'Результат интеллектуальной деятельности.';
  document.body.appendChild(tooltipRid);

const tooltipNda = document.createElement('div');
  tooltipNda.className = 'tooltip';
  tooltipNda.textContent = 'Non-Disclosure Agreement, или Соглашение о неразглашении';
  document.body.appendChild(tooltipNda);

function scanAndBind() {
    const ridLinks = document.querySelectorAll('a[href^="#rid"]:not([data-tooltip-bound])');
    ridLinks.forEach(link => {
      addTooltipListeners(link, tooltipRid);
      link.setAttribute('data-tooltip-bound', 'true');
    });

const ndaLinks = document.querySelectorAll('a[href^="#nda"]:not([data-tooltip-bound])');
    ndaLinks.forEach(link => {
      addTooltipListeners(link, tooltipNda);
      link.setAttribute('data-tooltip-bound', 'true');
    });
  }

// Запускаем сразу и через MutationObserver на динамические изменения
  scanAndBind();

const observer = new MutationObserver(() => {
    scanAndBind();
  });

observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

Скопировать код

<script src="https://cdn.jsdelivr.net/npm/scrollbooster@3.0.2/dist/scrollbooster.min.js" defer=""></script>

<style>

.uc-rsn .scrollbooster-viewport {
    /* горизонтальный скролл, скрытые скроллбары */
    cursor: grab;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ */
}

/* Скрываем в WebKit-браузерах */
.uc-rsn .scrollbooster-viewport::-webkit-scrollbar {
    height: 0;
    background: transparent;
}

.uc-rsn .dot.active .tn-atom {
    opacity: 1 !important;
}


</style>