Проверка корректности установки

После установки Tippy.js важно убедиться, что библиотека корректно интегрирована в проект и работает без ошибок. Проверка корректности установки включает несколько шагов: проверку подключения файлов, работу с базовой инициализацией, а также визуальную проверку всплывающих подсказок.

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

Для начала необходимо убедиться, что подключены все необходимые файлы:

  1. JavaScript библиотека Для установки через CDN достаточно добавить в <head> или перед закрывающим тегом </body>:
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Важно подключать @popperjs/core перед Tippy.js, так как библиотека использует Popper для позиционирования подсказок.

  1. CSS стили Для базового оформления тултипов подключается CSS:
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

Без подключения CSS подсказки будут работать, но выглядеть стандартно и некрасиво.

  1. Проверка наличия файлов Для проверки можно открыть консоль браузера. Если подключение прошло успешно, ошибки о Tippy is not defined или Popper is not defined отсутствуют.

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

После подключения файлов проверка корректности работы Tippy.js выполняется через минимальный пример. Создадим HTML-элемент и инициализируем тултип:

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

<script>
  tippy('#example-button', {
    content: 'Пример подсказки'
  });
</script>

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

  • tippy() принимает селектор или DOM-элемент.
  • content задаёт текст подсказки.
  • Если при наведении на кнопку появляется подсказка с текстом “Пример подсказки”, библиотека работает корректно.

Проверка работы с различными селекторами

Tippy.js поддерживает несколько способов инициализации:

  1. CSS-селекторы
tippy('.tooltip', { content: 'Подсказка' });

Все элементы с классом .tooltip получат тултипы.

  1. Массив DOM-элементов
const buttons = document.querySelectorAll('.btn');
tippy(buttons, { content: 'Кнопка' });

Инициализация сразу для нескольких элементов через NodeList.

  1. Отдельный DOM-элемент
const btn = document.getElementById('single-btn');
tippy(btn, { content: 'Одиночная подсказка' });

Проверка позиционирования и событий

Для проверки корректного позиционирования рекомендуется использовать разные значения свойства placement:

tippy('#example-button', {
  content: 'Сверху',
  placement: 'top'
});

tippy('#example-button', {
  content: 'Снизу',
  placement: 'bottom'
});

Проверка:

  • Подсказки должны появляться в соответствии с указанным направлением.
  • Отсутствие сдвигов или наложений подтверждает корректную работу Popper.js.

Также важно протестировать различные триггеры:

tippy('#example-button', {
  content: 'Клик для подсказки',
  trigger: 'click'
});
  • mouseenter – подсказка появляется при наведении (по умолчанию).
  • click – подсказка появляется при клике.
  • focus – для элементов формы при получении фокуса.

Проверка динамических элементов

Tippy.js корректно работает с элементами, добавленными в DOM после загрузки страницы. Для проверки можно создать кнопку через Jav * aScript:

const newBtn = document.createElement('button');
newBtn.textContent = 'Динамическая кнопка';
document.body.appendChild(newBtn);

tippy(newBtn, { content: 'Подсказка для нового элемента' });

Если подсказка появляется, установка библиотеки полностью функциональна.

Использование консоли для отладки

Для выявления возможных ошибок:

  • Проверить, существует ли объект tippy:
console.log(typeof tippy); // должен вывести 'function'
  • Проверить доступность Popper:
console.log(typeof Popper); // должен вывести 'function'

Любые ошибки в консоли, связанные с undefined, свидетельствуют о некорректном подключении файлов или порядке подключения.

Автоматическая проверка через npm

Если библиотека установлена через npm:

npm install tippy.js @popperjs/core

Проверка корректности:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

const button = document.querySelector('#example-button');
tippy(button, { content: 'Тестовая подсказка' });
  • При успешной инициализации ошибок не возникает.
  • Подсказка появляется при наведении.

Проверка совместимости с фреймворками

Для проектов на Vue, React или Angular необходимо убедиться, что используются соответствующие адаптеры:

  • React: @tippyjs/react
  • Vue 3: @tippyjs/vue
  • Angular: стандартный tippy.js через Angular directives

Простейший тест – отобразить компонент с тултипом и проверить его появление при интерактивном действии.

Корректная проверка установки Tippy.js должна включать:

  1. Подключение всех файлов и отсутствие ошибок в консоли.
  2. Инициализацию минимального тултипа и проверку его отображения.
  3. Проверку разных селекторов и событий.
  4. Проверку динамических элементов.
  5. Тестирование в рамках используемого фреймворка, если есть.

Правильное выполнение этих шагов гарантирует, что библиотека полностью готова к дальнейшему использованию.

Оглавление