Подключение через CDN

Tippy.js — это лёгкая и мощная библиотека для создания подсказок и тултипов на веб-страницах. Подключение через CDN позволяет быстро интегрировать библиотеку без необходимости установки через npm или сборщиков модулей.

Подключение CSS и JS файлов

Для работы Tippy.js через CDN необходимо подключить CSS для стилизации тултипов и JavaScript для функционала.

<!-- CSS Tippy.js -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

<!-- Popper.js (зависимость Tippy.js) -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>

<!-- JS Tippy.js -->
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script>

Примечания:

  • tippy.css обеспечивает базовую стилизацию тултипов.
  • Popper.js необходим для корректного позиционирования подсказок. Tippy.js не будет работать без этой зависимости.
  • tippy-bundle.umd.min.js содержит весь функционал библиотеки в одном файле для использования через <script>.

Инициализация тултипов

После подключения файлов через CDN можно создавать подсказки для элементов страницы. Для этого используется функция tippy().

<button id="example">Наведите на меня</button>

<script>
  tippy('#example', {
    content: 'Простая подсказка',
    placement: 'right', // Позиция тултипа относительно элемента
    animation: 'scale', // Анимация появления
  });
</script>

Ключевые моменты:

  • content — текст или HTML подсказки.
  • placement — позиция тултипа: top, bottom, left, right, auto.
  • animation — визуальный эффект появления (scale, fade, shift-away и др.).

Подключение нескольких тултипов одновременно

Можно инициализировать тултипы на нескольких элементах за один вызов:

<button class="tooltip-btn" data-tooltip="Тултип 1">Кнопка 1</button>
<button class="tooltip-btn" data-tooltip="Тултип 2">Кнопка 2</button>

<script>
  tippy('.tooltip-btn', {
    content(reference) {
      return reference.getAttribute('data-tooltip');
    },
    placement: 'top',
    animation: 'fade',
  });
</script>

Особенности:

  • Функция content(reference) позволяет динамически получать содержимое подсказки.
  • CSS классы и атрибуты можно использовать для индивидуальной настройки каждого элемента.

Настройка HTML-содержимого тултипов

Tippy.js поддерживает HTML внутри подсказок, что расширяет возможности оформления.

<button id="html-tooltip">HTML Тултип</button>

<script>
  tippy('#html-tooltip', {
    content: `<strong>Жирный текст</strong><br>и новая строка`,
    allowHTML: true, // Включение HTML
    placement: 'bottom',
  });
</script>

Важно: allowHTML: true обязательно для отображения HTML-содержимого.

Динамическое управление тултипами

Tippy.js через CDN предоставляет API для управления подсказками после их инициализации:

<button id="manual">Показать тултип вручную</button>

<script>
  const instance = tippy('#manual', {
    content: 'Я управляюсь вручную',
    trigger: 'manual' // отключение стандартных событий hover/focus
  });

  document.getElementById('manual').addEventListener('click', () => {
    instance.show();
    setTimeout(() => instance.hide(), 2000);
  });
</script>

Особенности:

  • trigger: 'manual' отключает стандартное появление тултипа.
  • Методы show(), hide(), destroy() позволяют управлять жизненным циклом подсказки программно.

Подключение через CDN с настройкой тем и стилей

Можно подключать кастомные темы для тултипов без сборщика модулей:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light.css" />

<button id="custom-theme">Светлая тема</button>

<script>
  tippy('#custom-theme', {
    content: 'Подсказка со светлой темой',
    theme: 'light',
  });
</script>

Ключевые моменты:

  • Темы подключаются отдельными CSS-файлами через CDN.
  • Стандартные темы: light, dark, translucent.

Итоговые рекомендации по CDN

  • Всегда подключать Popper.js перед Tippy.js.
  • CSS-файлы должны быть подключены до JS, чтобы стили применялись сразу.
  • Для динамического контента использовать content(reference) и allowHTML.
  • Для управления тултипами программно применять trigger: 'manual' и методы экземпляра.

Эти правила позволяют максимально использовать возможности Tippy.js при подключении через CDN без установки дополнительных пакетов.

Оглавление