Кастомные темы

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

  1. Создание CSS-файла для темы Каждая тема хранится в отдельном CSS-файле или в отдельном блоке стилей. Класс темы должен наследовать общие стили Tooltipster, например:
.tooltipster-mytheme {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 14px;
    border: 2px solid #34495e;
}

.tooltipster-mytheme .tooltipster-arrow-border {
    border-color: #34495e;
}

.tooltipster-mytheme .tooltipster-arrow {
    border-color: #2c3e50;
}
  • .tooltipster-mytheme — основной класс для тултипа.
  • .tooltipster-arrow и .tooltipster-arrow-border — стили для стрелки тултипа, которые помогают интегрировать её с фоном и рамкой.
  1. Подключение темы в Tooltipster При инициализации тултипа указывается имя темы:
$('.tooltip-element').tooltipster({
    theme: 'mytheme',
    animation: 'fade',
    delay: 200
});

theme принимает строку без префикса .tooltipster-, Tooltipster автоматически добавит его при применении.

Комбинирование стандартных и кастомных тем

Tooltipster позволяет наследовать стандартные темы и изменять отдельные свойства, избегая полной переработки. Например, можно расширить тему tooltipster-light:

.tooltipster-light.my-custom-mod {
    background-color: #1abc9c;
    color: #ffffff;
}

.tooltipster-light.my-custom-mod .tooltipster-arrow {
    border-color: #1abc9c;
}

И использовать её:

$('.tooltip-element').tooltipster({
    theme: ['tooltipster-light', 'my-custom-mod']
});

Такой подход особенно удобен для быстрой адаптации существующих стандартных тем.

Динамическая смена темы

Темы можно менять после инициализации тултипа с помощью метода option:

$('.tooltip-element').tooltipster('option', 'theme', 'mytheme');

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

Поддержка анимаций и кастомных эффектов

Tooltipster поддерживает несколько встроенных анимаций (fade, grow, swing, slide), которые можно комбинировать с кастомной темой. Для кастомной анимации можно подключить собственные CSS-транзишены:

.tooltipster-mytheme {
    transition: opacity 0.4s ease-in-out, transform 0.3s ease;
    transform: scale(0.95);
    opacity: 0;
}

.tooltipster-mytheme.tooltipster-show {
    transform: scale(1);
    opacity: 1;
}

При этом класс .tooltipster-show автоматически добавляется Tooltipster при показе тултипа, что обеспечивает плавное появление.

Настройка размеров и внутреннего содержимого

  • Ширина: можно задать фиксированную или максимальную ширину:
.tooltipster-mytheme {
    max-width: 250px;
    min-width: 100px;
}
  • Отступы и внутренние элементы: padding внутри тултипа регулируется напрямую через тему. Для сложных структур можно использовать вложенные селекторы:
.tooltipster-mytheme .tooltip-content {
    line-height: 1.5;
    font-weight: 500;
}
  • Поддержка HTML-содержимого: Tooltipster умеет работать с HTML, поэтому тема должна учитывать стили для тегов внутри тултипа, например списков или таблиц.

Работа с темами и мультитултипами

Tooltipster поддерживает множественные тултипы на одной странице с разными темами. Для каждого элемента можно задать уникальную тему или использовать массив тем:

$('#button1').tooltipster({ theme: 'blue-theme' });
$('#button2').tooltipster({ theme: ['tooltipster-light', 'custom-mod'] });

Важно учитывать порядок подключения CSS: кастомная тема должна подключаться после базовой, чтобы стили корректно переопределялись.

Практические советы по созданию тем

  1. Всегда задавать стили стрелки (.tooltipster-arrow и .tooltipster-arrow-border), чтобы она гармонировала с тултипом.
  2. Использовать переменные CSS для повторяющихся цветов и шрифтов, чтобы облегчить модификацию.
  3. Проверять адаптивность: тултипы должны корректно отображаться при узких экранах.
  4. Минимизировать использование !important — только там, где действительно необходимо переопределить встроенные стили Tooltipster.

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

Оглавление