Интеграционное тестирование

Tippy.js — это современная библиотека для создания всплывающих подсказок (tooltip) на элементах DOM. Она построена на основе Popper.js, что обеспечивает точное позиционирование и гибкость в настройках. Основное преимущество Tippy.js заключается в простоте интеграции с любыми веб-приложениями и поддержке различных триггеров, анимаций и интерактивных подсказок.

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

tippy('.button', {
  content: 'Пример подсказки',
});

В этом примере создается простая подсказка для всех элементов с классом button. Параметр content определяет текст или HTML-содержимое подсказки.

Настройка триггеров

Tippy.js позволяет управлять событиями, которые вызывают отображение подсказки. Основные триггеры:

  • mouseenter — стандартное появление при наведении курсора.
  • click — отображение по клику.
  • focus — для элементов форм, отображение при фокусе.
  • manual — ручное управление через методы API.
tippy('.input', {
  content: 'Введите значение',
  trigger: 'focus',
});

Использование manual позволяет полностью контролировать открытие и закрытие подсказок через методы show(), hide() и destroy().

Позиционирование и Popper.js

Tippy.js использует Popper.js для управления положением подсказки относительно целевого элемента. Позиции можно задавать через параметр placement:

  • top, bottom, left, right — стандартные позиции.
  • top-start, top-end и аналогичные — уточнение выравнивания.
  • Автоматическое смещение через flip и offset.
tippy('.icon', {
  content: 'Информация',
  placement: 'right-start',
  offset: [0, 10],
});

Параметр offset позволяет смещать подсказку относительно исходного положения, что удобно для сложных интерфейсов.

Анимации и стилизация

Tippy.js поддерживает встроенные анимации (fade, scale, shift-away) и позволяет подключать собственные CSS-классы для кастомного оформления.

tippy('.tooltip', {
  content: 'Анимированная подсказка',
  animation: 'scale',
  theme: 'light-border',
});

Можно создавать собственные темы через CSS:

.tippy-box[data-theme~='custom'] {
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
}
tippy('.custom-tooltip', {
  content: 'Кастомная тема',
  theme: 'custom',
});

Интерактивные подсказки

Для создания интерактивных элементов внутри подсказки используется параметр interactive: true. Это позволяет размещать кнопки, ссылки или формы внутри всплывающей подсказки.

tippy('.menu', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

Параметр allowHTML: true разрешает использование HTML-контента внутри подсказки. При этом важно помнить о безопасности и фильтровать внешние данные.

Программное управление

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

  • show() — показать подсказку.
  • hide() — скрыть подсказку.
  • destroy() — полностью удалить подсказку.
  • setContent(newContent) — изменить содержимое на лету.
const tip = tippy('#dynamic', { content: 'Изначальный текст' });
tip[0].setContent('Обновленный текст');
tip[0].show();

Делегирование и динамические элементы

Для элементов, которые создаются динамически, используется делегирование через параметр delegate:

tippy(document.body, {
  content: 'Подсказка для кнопки',
  delegate: '.dynamic-button',
});

Подсказка будет работать для всех элементов с классом dynamic-button, даже если они добавлены после инициализации Tippy.js.

Задержка и продолжительность отображения

Tippy.js поддерживает задержку появления (delay) и продолжительность анимации (duration):

tippy('.delayed', {
  content: 'Подсказка с задержкой',
  delay: [500, 200], // [появление, скрытие] в миллисекундах
  duration: [300, 200], // анимация появления/скрытия
});

Это позволяет гибко настраивать UX, особенно для интерактивных интерфейсов.

Интеграция с фреймворками

Tippy.js легко интегрируется с React, Vue и Angular. В React, например, используется компонент Tippy:

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

<Tippy content="Подсказка в React">
  <button>Наведи меня</button>
</Tippy>

Аналогичные подходы доступны для Vue и Angular через соответствующие адаптеры.

Локализация и динамический контент

Tippy.js позволяет подставлять динамический контент через функции:

tippy('.user', {
  content(reference) {
    return `Имя пользователя: ${reference.dataset.username}`;
  },
});

Это особенно полезно для систем с интерактивными данными и локализованными подсказками.

Tippy.js сочетает простоту API с гибкостью и мощным функционалом позиционирования. Его возможности охватывают статические и динамические интерфейсы, поддерживают HTML-контент, интерактивность, анимации и интеграцию с современными фреймворками. Такой подход позволяет создавать аккуратные и настраиваемые всплывающие подсказки в любом веб-приложении.

Оглавление