Встроенные темы

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

Подключение встроенных тем

Библиотека поставляется с несколькими готовыми темами: light, dark и material. Для их использования необходимо:

  1. Подключить CSS-файл Tippy.js:
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
  1. В JavaScript при инициализации указать опцию theme:
tippy('.button', {
  content: 'Подсказка с темой',
  theme: 'light', // варианты: 'light', 'dark', 'material'
});

Особенности тем

  • Light — светлая тема с белым фоном и темным текстом, хорошо подходит для светлых интерфейсов.
  • Dark — тёмная тема с тёмным фоном и светлым текстом, гармонирует с тёмными UI.
  • Material — тема, вдохновлённая Material Design: аккуратные тени, плавные границы и контрастные цвета текста.

Каждая тема автоматически задаёт ключевые CSS-свойства подсказки, такие как background-color, color, border-radius и box-shadow.

Использование нескольких тем

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

tippy('#button1', {
  content: 'Светлая подсказка',
  theme: 'light',
});

tippy('#button2', {
  content: 'Тёмная подсказка',
  theme: 'dark',
});

Для динамического изменения темы можно использовать метод setProps:

const instance = tippy('#dynamicButton', {
  content: 'Начальная тема',
  theme: 'light',
});

instance.setProps({ theme: 'dark' });

Настройка встроенных тем через CSS

Встроенные темы можно расширять или модифицировать, переопределяя их CSS-классы. Каждая тема имеет уникальный класс .tippy-box[data-theme="имя_темы"]. Например, для изменения цвета текста темы light:

.tippy-box[data-theme="light"] {
  color: #333333;
  font-weight: bold;
}

Можно также добавлять новые свойства для тени или анимации:

.tippy-box[data-theme="material"] {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

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

Для создания уникальной темы можно использовать существующую как шаблон и добавить новый класс:

tippy('.custom', {
  content: 'Подсказка с новой темой',
  theme: 'custom', // имя новой темы
});

И соответствующий CSS:

.tippy-box[data-theme="custom"] {
  background-color: #4CAF50;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

Адаптивность и сочетание с анимациями

Темы работают совместно с опцией animation Tippy.js. Любая встроенная тема корректно отображает анимации fade, scale, shift-away и их комбинации:

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

Практические рекомендации

  • Для светлого интерфейса чаще всего используется тема light.
  • Для тёмного интерфейса или ночного режима — dark.
  • Тема material подходит для современных приложений, где важна визуальная аккуратность.
  • Если требуется фирменный стиль, лучше создавать собственную тему, используя встроенные как базу.
  • Совмещение темы и кастомного CSS позволяет легко поддерживать единый дизайн во всех подсказках приложения.

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

Оглавление