Создание базового тултипа

Для работы с библиотекой Tippy.js необходимо подключить её файлы. Существует несколько способов:

Через 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>
  • @popperjs/core — обязательная зависимость для позиционирования тултипов.
  • tippy.js — сам функционал тултипов.
  • tippy.css — базовые стили для отображения подсказок.

Через npm:

npm install tippy.js @popperjs/core

И подключение в проекте:

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

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

Создание простого тултипа производится через функцию tippy(). В качестве первого аргумента передаётся CSS-селектор элемента, к которому будет привязан тултип, а вторым — объект с настройками.

tippy('#myButton', {
  content: 'Простая подсказка'
});
  • #myButton — селектор элемента.
  • content — текст, отображаемый в тултипе.

После этой команды при наведении на элемент с идентификатором myButton появится подсказка.

Настройка позиции тултипа

Параметр placement отвечает за позиционирование тултипа относительно элемента:

tippy('#myButton', {
  content: 'Подсказка сверху',
  placement: 'top' // top, bottom, left, right, top-start, bottom-end и т.д.
});

Популярные значения placement:

  • top — сверху.
  • bottom — снизу.
  • left — слева.
  • right — справа.
  • top-start / top-end — сверху с выравниванием по краям.
  • bottom-start / bottom-end — снизу с выравниванием.

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

По умолчанию тултип появляется при наведении (mouseenter) и исчезает при уходе курсора (mouseleave). Можно изменить поведение с помощью свойства trigger:

tippy('#myButton', {
  content: 'Триггер клик',
  trigger: 'click' // hover, click, focus, manual
});
  • hover — стандартное поведение.
  • click — появление при клике.
  • focus — появление при фокусе (удобно для форм).
  • manual — управление тултипом вручную через API.

Настройка анимации и задержки

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

tippy('#myButton', {
  content: 'Анимированная подсказка',
  animation: 'scale', // fade, scale, shift-away, shift-toward
  delay: [100, 200] // [задержка появления, задержка скрытия] в мс
});
  • animation — тип анимации.
  • delay — массив из двух значений: время задержки перед показом и перед скрытием.

HTML-содержимое тултипа

Помимо текста, тултип может содержать HTML. Для этого используется опция allowHTML:

tippy('#myButton', {
  content: '<strong>Жирный текст</strong> и <em>курсив</em>',
  allowHTML: true
});

Важно: при использовании HTML следует убедиться, что контент безопасен, чтобы избежать XSS-уязвимостей.

Примеры нескольких тултипов на странице

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

tippy('.info-button', {
  content: 'Информация о кнопке',
  placement: 'right',
  animation: 'shift-away'
});

Здесь все элементы с классом info-button получат идентичный тултип.

Управление тултипом через API

Tippy.js возвращает объект тултипа, который позволяет управлять его состоянием программно:

const tip = tippy('#myButton', {
  content: 'Управляемая подсказка'
})[0];

tip.show(); // Показать тултип
tip.hide(); // Скрыть тултип
tip.destroy(); // Удалить тултип полностью

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

Основные рекомендации

  • Для простых подсказок достаточно указать content и placement.
  • Использовать allowHTML только с безопасным контентом.
  • Для нескольких элементов можно использовать общий селектор, чтобы не создавать тултип для каждого элемента отдельно.
  • Использовать delay и animation для улучшения UX, чтобы подсказки не появлялись слишком резко.

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

Оглавление