E2E тестирование

Для начала необходимо установить Tippy.js. Существует два основных способа подключения: через npm/yarn или с помощью CDN.

Через npm:

npm install tippy.js

После установки подключение в проекте выглядит так:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // базовые стили

Через CDN:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

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

Создание базовых подсказок

Для создания простой подсказки используется функция tippy(), в которую передается элемент (или селектор) и объект с опциями:

tippy('#myButton', {
  content: 'Нажмите для действий'
});

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

  • content — текст или HTML-содержимое подсказки.
  • Можно использовать несколько элементов с одним селектором:
tippy('.tooltip', {
  content: 'Подсказка для всех элементов с классом tooltip'
});

Настройка позиции и анимации

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

Позиция (placement):

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

Доступные значения: top, bottom, left, right и их комбинации (top-start, bottom-end и т.д.).

Анимация (animation):

tippy('#myButton', {
  content: 'С анимацией',
  animation: 'scale'
});

Поддерживаемые типы анимации: shift-away, shift-toward, scale, fade, perspective.

Смещение (offset):

tippy('#myButton', {
  content: 'Смещение вниз на 10px',
  offset: [0, 10] // [сдвиг по горизонтали, сдвиг по вертикали]
});

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

Tippy.js позволяет создавать интерактивные всплывающие окна с кнопками, ссылками или формами.

tippy('#myButton', {
  content: `<button id="btnClick">Кликни меня</button>`,
  allowHTML: true,
  interactive: true
});

Ключевые параметры:

  • allowHTML: true — разрешает использование HTML внутри подсказки.
  • interactive: true — позволяет взаимодействовать с элементами подсказки без закрытия при наведении.

Обработка событий внутри подсказки:

document.addEventListener('click', (e) => {
  if (e.target.id === 'btnClick') {
    alert('Кнопка внутри подсказки нажата');
  }
});

Программное управление подсказками

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

Создание и сохранение экземпляра:

const instance = tippy('#myButton', {
  content: 'Управление программно'
})[0];

Основные методы:

  • instance.show() — показать подсказку.
  • instance.hide() — скрыть подсказку.
  • instance.toggle() — переключить состояние.
  • instance.setContent('Новый текст') — изменить содержимое подсказки.
  • instance.destroy() — удалить подсказку и освободить ресурсы.

Отложенная инициализация и динамическое содержимое

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

tippy.delegate(document.body, {
  target: '.dynamic-tooltip',
  content: (reference) => `Данные для: ${reference.textContent}`
});

Преимущества делегирования:

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

Управление триггерами

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

tippy('#myButton', {
  content: 'Открытие по клику',
  trigger: 'click' // по умолчанию 'mouseenter focus'
});

Поддерживаются комбинированные триггеры:

tippy('#myButton', {
  content: 'Клик или наведение',
  trigger: 'mouseenter click'
});

Дополнительно:

  • hideOnClick — управление скрытием при клике.
  • delay — задержка появления или скрытия в миллисекундах:
tippy('#myButton', {
  content: 'Задержка появления',
  delay: [500, 200] // [появление, скрытие]
});

Стилизация подсказок

Tippy.js использует CSS-классы, которые позволяют полностью кастомизировать внешний вид.

tippy('#myButton', {
  content: 'Синий стиль',
  theme: 'blue'
});

Для кастомной темы:

.tippy-box[data-theme~='blue'] {
  background-color: #3498db;
  color: #fff;
  font-weight: bold;
}
.tippy-box[data-theme~='blue'] .tippy-arrow {
  color: #3498db;
}
  • theme — имя темы, которое используется в CSS селекторе.
  • Можно создавать несколько тем для разных подсказок.

Массивные и сложные подсказки

Для больших проектов возможно создание массива подсказок с одинаковыми параметрами:

tippy('.tooltip', {
  content: 'Общий текст для всех',
  placement: 'bottom',
  animation: 'scale'
});

Для подсказок с уникальным содержимым используют функцию:

tippy('.tooltip', {
  content: (reference) => `Данные: ${reference.dataset.info}`
});

Такой подход упрощает поддержку и масштабирование подсказок на страницах с динамическим контентом.

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

Tippy.js легко интегрируется с React, Vue и Svelte, используя их нативные подходы к рендерингу и жизненному циклу компонентов.

Пример в React:

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

<Tippy content="Подсказка в React">
  <button>Кнопка</button>
</Tippy>
  • Позволяет использовать JSX внутри подсказки.
  • Управление состоянием через props.

Пример в Vue:

<template>
  <button v-tippy="'Подсказка в Vue'">Кнопка</button>
</template>

<script>
import { directive as tippy } from 'tippy.js';
export default {
  directives: { tippy }
}
</script>
  • Директива v-tippy обеспечивает легкую интеграцию без ручного управления экземплярами.

Отладка и производительность

  • Использование делегирования для большого количества элементов снижает нагрузку.
  • Отключение интерактивности там, где она не нужна (interactive: false), ускоряет работу.
  • Проверка destroy() при удалении элементов из DOM предотвращает утечки памяти.
  • Использование CSS-переменных и кастомных тем упрощает визуальное сопровождение проекта.

Поддержка событий Tippy.js

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

  • onShow(instance) — перед показом подсказки.
  • onShown(instance) — после появления.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.
  • onMount(instance) — при монтировании DOM.
  • onTrigger(instance, event) — при срабатывании триггера.

Пример использования:

tippy('#myButton', {
  content: 'Подсказка с событиями',
  onShow(instance) {
    console.log('Подсказка показывается', instance);
  }
});

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

Оглавление