Переопределение CSS переменных

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

Основные CSS переменные

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

  • --tippy-font-size — размер шрифта тултипа.
  • --tippy-padding — внутренние отступы содержимого.
  • --tippy-border-radius — радиус скругления углов.
  • --tippy-background — цвет фона.
  • --tippy-color — цвет текста.
  • --tippy-box-shadow — тень тултипа.
  • --tippy-arrow-size — размер стрелки.
  • --tippy-animation-duration — длительность анимации появления и скрытия.

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

Глобальное переопределение

Чтобы изменить стиль всех тултипов на странице, достаточно задать значения переменных в корневом селекторе :root:

:root {
  --tippy-font-size: 16px;
  --tippy-padding: 10px 15px;
  --tippy-border-radius: 8px;
  --tippy-background: #1a73e8;
  --tippy-color: #ffffff;
  --tippy-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  --tippy-arrow-size: 8px;
  --tippy-animation-duration: 250ms;
}

Такое переопределение затронет все тултипы на странице, сохраняя единый стиль интерфейса.

Локальное переопределение для конкретного тултипа

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

tippy('#myButton', {
  content: 'Локальный стиль',
  theme: 'custom',
});
.tippy-box[data-theme~='custom'] {
  --tippy-font-size: 14px;
  --tippy-padding: 8px 12px;
  --tippy-background: #ff5722;
  --tippy-color: #fff;
}

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

Динамическое изменение переменных через JavaScript

CSS-переменные могут изменяться в рантайме с помощью свойства style.setProperty на контейнере тултипа:

const instance = tippy('#dynamicButton', {
  content: 'Динамическое изменение',
});

instance.popper.style.setProperty('--tippy-background', '#4caf50');
instance.popper.style.setProperty('--tippy-color', '#000000');
instance.popper.style.setProperty('--tippy-padding', '12px 20px');

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

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

Tippy.js поддерживает подключение нескольких тем через опцию theme. Каждая тема может содержать свои CSS-переменные:

tippy('.themed', {
  content: 'Тема dark',
  theme: 'dark',
});
.tippy-box[data-theme~='dark'] {
  --tippy-background: #333;
  --tippy-color: #f1f1f1;
  --tippy-border-radius: 4px;
  --tippy-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

Можно создавать несколько тем и динамически менять их через JavaScript, что делает интерфейс адаптивным к различным дизайнам.

Наследование CSS переменных

Tippy.js учитывает наследование переменных. Если переменная не переопределена в локальной теме или контейнере, используется значение из :root. Это позволяет строить гибкую иерархию стилей: глобальные переменные задают базовый дизайн, а локальные — уникальные визуальные вариации.

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

  • Для корпоративного интерфейса рекомендуется задавать базовые переменные в :root и использовать локальные темы только для специальных элементов.
  • Анимации и тени лучше настраивать через CSS-переменные, чтобы сохранять производительность и избежать лишних перерасчетов стилей.
  • Динамическое переопределение через JavaScript полезно для интерактивных состояний, но не стоит использовать его для всех тултипов без необходимости, чтобы не создавать лишние стили в DOM.

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

Оглавление