Адаптация под дизайн-систему

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

Настройка темы и стилей

Tippy.js использует концепцию тем, которые можно определять через CSS-классы. Для интеграции с дизайн-системой рекомендуется:

  1. Создать отдельный CSS-класс для темы:
.tippy-custom {
  background-color: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-color);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-sm);
  border-radius: var(--ds-border-radius);
  padding: var(--ds-spacing-2);
  box-shadow: var(--ds-shadow-sm);
}
  1. Применять тему через опцию theme:
tippy('.btn', {
  content: 'Подсказка',
  theme: 'custom'
});

Использование CSS-переменных позволяет динамически адаптировать подсказки к смене темы интерфейса.

Контроль позиционирования

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

  • Опции placement и offset:
tippy('.btn', {
  content: 'Подсказка',
  placement: 'top-start',
  offset: [0, 8]
});
  • Динамическое изменение позиции при ограниченном пространстве:
tippy('.btn', {
  content: 'Подсказка',
  placement: 'auto',
  flip: true
});

Анимации и переходы

Дизайн-системы часто регламентируют стиль анимации. Tippy.js позволяет настроить анимацию через опцию animation и CSS-классы:

  • Встроенные анимации:
tippy('.btn', {
  content: 'Подсказка',
  animation: 'shift-away',
  duration: [200, 150]
});
  • Создание кастомной анимации через CSS:
.tippy-fade-custom {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.tippy-fade-custom[data-state='hidden'] {
  opacity: 0;
  transform: translateY(-4px);
}
.tippy-fade-custom[data-state='visible'] {
  opacity: 1;
  transform: translateY(0);
}
tippy('.btn', {
  content: 'Подсказка',
  animation: 'fade-custom'
});

Унификация контента

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

  • Использование HTML-контента:
tippy('.btn', {
  content: `
    <div class="tooltip-content">
      <strong>Заголовок</strong>
      <p>Описание действия кнопки</p>
    </div>
  `,
  allowHTML: true
});
  • Встраивание компонентов библиотеки UI: можно использовать React, Vue или Svelte компоненты для тултипов, сохраняя единый стиль.

Управление интерактивностью

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

  • Опция interactive:
tippy('.btn', {
  content: '<button class="tooltip-btn">Действие</button>',
  allowHTML: true,
  interactive: true
});
  • Закрытие при клике вне тултипа:
tippy('.btn', {
  content: 'Подсказка',
  interactive: true,
  hideOnClick: true
});
  • Поддержка hover и focus одновременно:
tippy('.btn', {
  content: 'Подсказка',
  trigger: 'mouseenter focus'
});

Масштабирование и управление поведением

Для крупных интерфейсов дизайн-систем важна согласованная логика поведения подсказок:

  • Группировка тултипов для синхронного управления:
const tooltips = tippy('.btn', { content: 'Подсказка' });
const instanceGroup = tooltips.map(t => t);
instanceGroup.forEach(t => t.show());
  • Программное управление: можно открывать или закрывать тултипы через методы show(), hide(), setContent():
const tip = tippy('.btn', { content: 'Подсказка' })[0];
tip.show();
tip.setContent('Новый контент');
tip.hide();

Адаптация к различным устройствам

Подсказки должны корректно отображаться на мобильных устройствах:

  • Проверка ширины экрана и адаптация позиции:
tippy('.btn', {
  content: 'Подсказка',
  placement: window.innerWidth < 768 ? 'bottom' : 'top'
});
  • Увеличение зоны клика на мобильных:
.tooltip-content {
  padding: var(--ds-spacing-3);
}
  • Отключение hover-эффектов на тач-устройствах:
tippy('.btn', {
  trigger: 'click'
});

Итоговые рекомендации по интеграции

  1. Использовать CSS-переменные дизайн-системы для всех стилей тултипов.
  2. Настраивать позиции и анимации через Tippy.js и Popper.js для единообразного поведения.
  3. Обеспечить единый HTML-контент и структуру подсказок.
  4. Управлять интерактивностью и триггерами в соответствии с UX-паттернами дизайн-системы.
  5. Проверять корректность на разных разрешениях и устройствах.

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

Оглавление