Взаимодействие с контентом тултипа

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

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

Инициализация выполняется через jQuery:

$('.tooltip-element').tooltipster({
    content: 'Простой текст тултипа',
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200
});

Ключевые параметры:

  • content — текст или HTML-контент тултипа.
  • theme — визуальный стиль тултипа.
  • animation — анимация появления/исчезновения.
  • delay — задержка перед показом в миллисекундах.

Использование HTML-контента

Tooltipster позволяет вставлять любой HTML-контент, включая списки, изображения и формы. Для этого параметр content должен содержать jQuery объект или строку с HTML:

$('.tooltip-element').tooltipster({
    content: $('<div><h3>Заголовок</h3><p>Описание элемента</p></div>'),
    interactive: true
});

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

  • interactive: true — делает тултип интерактивным, позволяя кликать по элементам внутри.
  • HTML-контент может содержать кнопки, ссылки и другие элементы управления.

Динамический контент тултипа

Tooltipster поддерживает динамическое обновление содержимого через колбэк functionBefore или метод content:

$('.tooltip-element').tooltipster({
    functionBefore: function(instance, helper){
        if(helper.origin.dataset.loaded !== 'true'){
            $.get('/api/info', function(data){
                instance.content(data);
                helper.origin.dataset.loaded = 'true';
            });
        }
    }
});

Особенности подхода:

  • functionBefore вызывается перед показом тултипа.
  • Можно загружать данные с сервера и подставлять их в тултип.
  • Использование флага loaded предотвращает повторные запросы.

Управление состоянием тултипа

Tooltipster предоставляет методы для программного управления:

var instance = $('.tooltip-element').tooltipster({
    content: 'Начальный текст'
}).tooltipster('instance');

// Открытие и закрытие
instance.open();
instance.close();

// Обновление содержимого
instance.content('Новый текст');

// Проверка состояния
if(instance.status() === 'open') {
    console.log('Тултип открыт');
}

Методы:

  • open() — открывает тултип.
  • close() — закрывает тултип.
  • content() — получает или задаёт содержимое.
  • status() — возвращает текущее состояние (open или closed).

Работа с интерактивными элементами

Для форм и кнопок внутри тултипа важно использовать параметр interactive: true, чтобы тултип не закрывался при клике внутри:

$('.tooltip-form').tooltipster({
    content: $('<form><input type="text" placeholder="Имя"><button>Отправить</button></form>'),
    interactive: true,
    trigger: 'click'
});

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

  • Тултип может содержать поля ввода, чекбоксы и кнопки.
  • Параметр trigger устанавливает событие, запускающее тултип (click, hover, custom).

Анимация и позиционирование

Tooltipster поддерживает разнообразные варианты анимации и позиционирования:

$('.tooltip-element').tooltipster({
    animation: 'grow',
    delay: 300,
    side: 'right',
    distance: 10,
    theme: 'tooltipster-noir'
});

Параметры:

  • animation: fade, grow, slide, swing.
  • side: top, bottom, left, right.
  • distance: расстояние от целевого элемента.
  • Комбинируется с theme для кастомного оформления.

Обновление и удаление тултипов

Содержимое тултипа можно обновлять программно или удалять полностью:

// Обновление
$('.tooltip-element').tooltipster('content', 'Обновлённый текст');

// Полное уничтожение
$('.tooltip-element').tooltipster('destroy');

Замечания:

  • После destroy все события и стили тултипа удаляются.
  • Это важно при динамическом создании элементов на странице.

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

Для группы элементов можно использовать селектор и общие настройки:

$('.tooltip-group').tooltipster({
    content: 'Общий тултип',
    delay: 150,
    theme: 'tooltipster-light'
});

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

<button class="tooltip-element" data-tooltip="Специальный текст">Кнопка</button>
$('.tooltip-element').each(function(){
    $(this).tooltipster({
        content: $(this).data('tooltip')
    });
});

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

Интеграция с событиями страницы

Tooltipster можно комбинировать с другими событиями Jav * aScript:

$('.tooltip-element').on('click', function(){
    $(this).tooltipster('open');
});

$(document).on('scroll', function(){
    $('.tooltip-element').tooltipster('close');
});

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

  • Позволяет создавать кастомное поведение, например закрытие тултипов при прокрутке или навигации.
  • Используется совместно с методами open, close, reposition.

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

Оглавление