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

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

Определение темы через CSS

Для создания собственной темы необходимо определить CSS-класс с префиксом tippy-. Например, если тема называется custom, CSS-класс будет tippy-box[data-theme~='custom']. Внутри этого класса задаются стили тултипа.

Пример базового CSS для темы:

/* Основной контейнер тултипа */
.tippy-box[data-theme~='custom'] {
  background-color: #1e1e2f;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Стрелка тултипа */
.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow {
  border-top-color: #1e1e2f;
}

.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow {
  border-bottom-color: #1e1e2f;
}

.tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow {
  border-left-color: #1e1e2f;
}

.tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow {
  border-right-color: #1e1e2f;
}

В этом примере задается тёмная тема с закругленными углами, мягкой тенью и белым текстом. Стрелка тултипа автоматически наследует цвет фона темы, что обеспечивает визуальное единство.

Применение темы в JavaScript

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

tippy('.tooltip-element', {
  content: 'Пример кастомной темы',
  theme: 'custom',
  placement: 'top',
  animation: 'scale',
  arrow: true
});

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

  • theme — имя темы, соответствующее CSS-классу tippy-box[data-theme~='имя_темы'].
  • Можно использовать несколько тем одновременно, передавая их через пробел: theme: 'custom light'.
  • Tippy автоматически добавляет CSS-класс для стрелки и контейнера тултипа, применяя все заданные стили.

Динамическое изменение темы

Tippy.js позволяет менять тему на лету с помощью метода setProps:

const tip = tippy('.tooltip-element', {
  content: 'Смена темы динамически',
  theme: 'custom'
})[0];

// Через 2 секунды меняем тему
setTimeout(() => {
  tip.setProps({ theme: 'dark' });
}, 2000);

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

Комбинация тем и анимаций

Созданные темы можно сочетать с предустановленными анимациями Tippy.js (fade, scale, shift-away, perspective). Стили темы отвечают за визуальную часть, а анимация — за динамику появления и исчезновения:

tippy('.tooltip-element', {
  content: 'Анимация + кастомная тема',
  theme: 'custom',
  animation: 'perspective',
  duration: [300, 200]
});
  • duration принимает массив [show, hide] в миллисекундах.
  • Можно комбинировать несколько CSS-эффектов, таких как тени, градиенты и трансформации, не нарушая работы анимации.

Наследование и расширение тем

Tippy.js поддерживает наследование стилей через CSS. Можно создать базовую тему, а затем расширять её для конкретных элементов:

/* Базовая тема */
.tippy-box[data-theme~='base'] {
  background-color: #333;
  color: #fff;
  border-radius: 6px;
}

/* Расширение темы для предупреждений */
.tippy-box[data-theme~='base-warning'] {
  background-color: #ff9800;
  color: #000;
}
tippy('.warning-element', {
  content: 'Внимание!',
  theme: 'base-warning'
});

Такой подход упрощает поддержку визуального единства в больших проектах.

Создание адаптивных тем

С помощью медиа-запросов CSS можно создавать темы, адаптирующиеся к размерам экрана или предпочтениям пользователя (prefers-color-scheme):

@media (prefers-color-scheme: dark) {
  .tippy-box[data-theme~='adaptive'] {
    background-color: #222;
    color: #eee;
  }
}

@media (prefers-color-scheme: light) {
  .tippy-box[data-theme~='adaptive'] {
    background-color: #fff;
    color: #000;
  }
}
tippy('.adaptive-element', {
  content: 'Адаптивная тема',
  theme: 'adaptive'
});

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

Важные рекомендации

  • Для масштабируемости проекта лучше создавать отдельный CSS-файл с темами.
  • Использовать семантические имена для тем (info, warning, success) для удобства.
  • Проверять совместимость цветов с фоном страницы для хорошей читаемости.
  • Всегда задавать цвет стрелки в соответствии с фоном тултипа.

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

Оглавление