Темы оформления

Tooltipster предоставляет мощный механизм настройки внешнего вида подсказок через темы оформления. Каждая тема определяет стили подсказки, включая цвета, шрифты, отступы, рамки и анимации. Использование готовых тем позволяет быстро привести подсказки к единому визуальному стилю, а создание собственных тем даёт полный контроль над дизайном.

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

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

Пример подключения стандартной темы:

<link rel="stylesheet" href="tooltipster.bundle.min.css">
<script src="jquery.min.js"></script>
<script src="tooltipster.bundle.min.js"></script>

Инициализация с выбором темы:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light'
});
  • theme принимает название темы, совпадающее с классом в CSS.
  • Tooltipster по умолчанию использует тему tooltipster-default.

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

Tooltipster поставляется с несколькими готовыми темами:

  1. tooltipster-default — базовая тема, подходящая для большинства проектов.
  2. tooltipster-light — светлая тема с минимальными границами.
  3. tooltipster-noir — тёмная тема для контрастного интерфейса.
  4. tooltipster-punk — яркая тема с выделенными границами и необычной анимацией.
  5. tooltipster-shadow — добавляет тень и округлые края, создавая эффект «плавающей» подсказки.

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

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

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

Пример пользовательской темы:

.tooltipster-mytheme {
    background-color: #2a2a2a;
    color: #fff;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.tooltipster-mytheme .tooltipster-arrow {
    color: #2a2a2a;
}

Инициализация с кастомной темой:

$('.tooltip').tooltipster({
    theme: 'mytheme'
});
  • .tooltipster-arrow управляет цветом стрелки, которая указывает на целевой элемент.
  • Все остальные свойства наследуются от базовой темы или задаются вручную.

Настройка анимации в темах

Темы позволяют задавать анимацию появления и скрытия подсказок:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    animation: 'fade',  // поддерживаемые: fade, grow, swing, slide, fall
    delay: 200,          // задержка перед показом
    duration: 400        // длительность анимации
});
  • animation может быть указана в настройках Tooltipster или определена через CSS в теме.
  • Пользовательские темы часто включают свои собственные анимации, чтобы подсказки выглядели гармонично с интерфейсом.

Множественные темы на одной странице

Tooltipster позволяет использовать разные темы для разных подсказок:

$('#button1').tooltipster({ theme: 'tooltipster-light' });
$('#button2').tooltipster({ theme: 'tooltipster-noir' });
$('#button3').tooltipster({ theme: 'mytheme' });

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

Переопределение свойств темы через JS

Некоторые визуальные параметры можно менять динамически:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    functionInit: function(instance, helper){
        if(helper.origin.id === 'special') {
            instance.content('Особая подсказка').option('theme', 'tooltipster-noir');
        }
    }
});
  • functionInit вызывается при инициализации подсказки и позволяет менять содержимое и тему в зависимости от условий.
  • Это полезно для адаптивных интерфейсов, где один и тот же элемент может менять стиль подсказки.

Интеграция с CSS-фреймворками

Tooltipster легко интегрируется с Bootstrap, Tailwind и другими фреймворками. Достаточно создать тему, которая наследует базовые стили фреймворка, и использовать её для всех подсказок. Например, для Bootstrap:

.tooltipster-bootstrap {
    background-color: #007bff;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}
$('.tooltip').tooltipster({ theme: 'bootstrap' });

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

  • Использовать минимум вложенных стилей, чтобы тема легко переопределялась.
  • Всегда задавать цвет стрелки .tooltipster-arrow, чтобы она совпадала с фоном подсказки.
  • Проверять отображение темы на всех типах элементов (кнопки, ссылки, иконки).
  • Использовать наследование от стандартной темы, если требуется только частичная кастомизация.

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

Оглавление