Viewport meta тег

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

Простейший пример создания tooltip:

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

Здесь:

  • #myButton — целевой элемент;
  • content — текст подсказки;
  • placement — положение относительно элемента (top, bottom, left, right).

Конфигурация и опции

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

  • placement — задаёт позицию подсказки относительно целевого элемента. Можно использовать предустановленные значения (top, bottom-start, left-end и т.д.).
  • trigger — событие, при котором показывается подсказка (mouseenter, click, focus).
  • interactive — если true, подсказка может содержать интерактивные элементы (кнопки, ссылки), на которые можно кликать без её закрытия.
  • animation — задаёт тип анимации появления (fade, scale, shift-away).
  • theme — позволяет применить CSS-тему для визуального оформления.
  • delay — задаёт задержку перед появлением или скрытием подсказки, может быть массивом [появление, скрытие].
  • maxWidth — ограничивает максимальную ширину подсказки.
tippy('.info', {
  content: 'Детальная информация',
  placement: 'right',
  interactive: true,
  animation: 'scale',
  theme: 'light-border',
  delay: [100, 200],
});

HTML и кастомный контент

Подсказка может содержать не только текст, но и HTML-контент. Для этого используется функция content или атрибут data-template.

tippy('#profile', {
  content: () => document.querySelector('#tooltip-template').innerHTML,
  allowHTML: true,
});
<div id="tooltip-template" style="display:none;">
  <strong>Имя:</strong> Иван<br>
  <strong>Возраст:</strong> 30
</div>

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

  • allowHTML: true обязательно для рендеринга HTML;
  • можно использовать <template> вместо div для лучшей семантики.

Управление состоянием и событиями

Tippy.js предоставляет методы для контроля подсказок:

  • .show() — показывает подсказку;
  • .hide() — скрывает подсказку;
  • .setContent(newContent) — изменяет содержимое динамически;
  • .destroy() — полностью удаляет экземпляр подсказки.

События:

  • onShow(instance) — вызывается перед показом;
  • onShown(instance) — после появления;
  • onHide(instance) — перед скрытием;
  • onHidden(instance) — после скрытия.

Пример динамического обновления содержимого:

const tip = tippy('#dynamic', {
  content: 'Первый текст'
});

document.querySelector('#updateButton').addEventListener('click', () => {
  tip[0].setContent('Обновлённый текст');
});

Позиционирование и адаптивность

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

  • flip — автоматическое изменение позиции, если подсказка не помещается в видимой области;
  • offset — смещение подсказки относительно элемента;
  • boundary — ограничение зоны отображения подсказки (viewport, window, элемент-контейнер).
tippy('#avatar', {
  content: 'Профиль пользователя',
  placement: 'bottom',
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: { offset: [0, 10] }
      },
      {
        name: 'flip',
        options: { fallbackPlacements: ['top', 'right'] }
      }
    ]
  }
});

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

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

tippy.delegate(document.body, {
  target: '.has-tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  placement: 'top',
});

Создание собственных анимаций и тем

Tippy.js позволяет создавать кастомные CSS-анимации и темы. Для этого:

  1. Определяется CSS-класс для темы;
  2. Указываются свойства theme и animation.
.tippy-box[data-theme~='custom'] {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
}

@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.tippy-box[data-animation~='pop'] {
  animation: pop 0.3s ease-out;
}
tippy('.custom-btn', {
  content: 'Кастомная подсказка',
  theme: 'custom',
  animation: 'pop',
});

Использование с фреймворками

Tippy.js легко интегрируется с React, Vue и Angular через обёртки или хуки:

  • React: @tippyjs/react;
  • Vue: tippy.vue;
  • Angular: использование через директивы и сервисы.

Пример для React:

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

<Tippy content="Интерактивная кнопка">
  <button>Наведи на меня</button>
</Tippy>

Производительность и оптимизация

  • Использование делегирования уменьшает количество экземпляров Tippy;
  • Опция appendTo: document.body предотвращает проблемы с overflow;
  • Настройка delay и duration позволяет уменьшить лишние перерисовки;
  • Минимизация HTML-контента внутри подсказок улучшает производительность при большом количестве элементов.

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

Оглавление