Визуальное регрессионное тестирование

Tooltipster — это мощная библиотека для создания всплывающих подсказок в веб-приложениях на JavaScript. Она предоставляет гибкий API для кастомизации внешнего вида, поведения и взаимодействия подсказок с элементами страницы. Основные возможности включают:

  • Поддержка HTML-контента внутри подсказки.
  • Анимации появления и исчезновения.
  • Различные положения относительно целевого элемента (top, bottom, left, right).
  • Настройка триггеров открытия и закрытия (hover, click, focus, manual).
  • Поддержка нескольких подсказок на одной странице без конфликтов.

Инициализация и базовое использование

Для создания подсказки необходимо подключить jQuery и саму библиотеку Tooltipster, после чего вызвать метод .tooltipster() на нужном элементе:

$('#myElement').tooltipster({
    content: 'Это простая подсказка',
    theme: 'tooltipster-light'
});

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

  • content — текст или HTML-контент подсказки.
  • theme — визуальная тема, которая задает стили подсказки.
  • animation — тип анимации появления (fade, grow, swing, slide).
  • delay — задержка перед показом подсказки в миллисекундах.
  • trigger — событие, которое вызывает показ (hover, click, focus, custom).

Настройка положения подсказки

Tooltipster позволяет точно управлять позиционированием:

$('#myElement').tooltipster({
    side: 'right', // Позиция справа
    distance: 10, // Отступ от элемента
    multiple: true // Разрешает открытие нескольких подсказок одновременно
});

Параметры side принимают значения: top, bottom, left, right. Для динамического позиционирования можно использовать functionOrigin и functionPosition для вычисления координат подсказки в реальном времени.

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

Подсказки могут содержать сложную разметку:

$('#myElement').tooltipster({
    content: $('<div><strong>Заголовок</strong><p>Описание элемента</p></div>'),
    interactive: true, // Разрешает взаимодействие с содержимым подсказки
    animation: 'fade'
});

interactive позволяет пользователю кликать по ссылкам, кнопкам или другим интерактивным элементам внутри подсказки, не закрывая её автоматически.

Динамическое обновление содержимого

Tooltipster поддерживает динамическое изменение контента через API:

var instance = $('#myElement').tooltipster('instance');
instance.content('Обновлённый текст подсказки');

Это полезно при асинхронной загрузке данных, например, через AJAX:

$('#myElement').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper){
        $.get('/data/info', function(data){
            instance.content(data);
        });
    }
});

Контроль состояния и программное управление

Подсказки можно открывать, закрывать и уничтожать программно:

var instance = $('#myElement').tooltipster('instance');
instance.open();    // Открыть подсказку
instance.close();   // Закрыть подсказку
instance.destroy(); // Удалить подсказку полностью

Темизация и стилизация

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

.tooltipster-custom {
    background: #222;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
}

Применение темы:

$('#myElement').tooltipster({
    theme: 'tooltipster-custom'
});

Расширенные возможности

  • Multiple instances — можно создавать несколько подсказок на странице с независимым управлением.
  • Viewport-aware positioning — автоматическая подстройка позиции подсказки при недостатке места.
  • Plugins support — расширения для мульти-контента, модальных подсказок и AJAX-контента.
  • Events — отслеживание событий открытия, закрытия, изменения содержимого через onBeforeOpen, onOpen, onClose, onUpdate.

Интеграция с динамическими элементами

Для элементов, которые добавляются на страницу динамически, используется делегирование:

$(document).on('mouseenter', '.dynamic-element', function(){
    $(this).tooltipster({
        content: 'Динамически добавленная подсказка'
    });
});

Оптимизация производительности

Для больших страниц рекомендуется:

  • Использовать одну тему для всех подсказок, чтобы уменьшить CSS-загрузку.
  • Вызывать .tooltipster() после полной загрузки DOM.
  • Отключать анимацию для подсказок, которые открываются часто, чтобы снизить нагрузку на рендеринг.

Пример комплексного использования

$('.info-icon').tooltipster({
    content: $('<div><h3>Информация</h3><p>Подробное описание элемента.</p></div>'),
    theme: 'tooltipster-light',
    interactive: true,
    animation: 'grow',
    delay: 200,
    side: 'bottom',
    functionBefore: function(instance, helper){
        if(!helper.origin.data('loaded')){
            $.get('/info/' + helper.origin.data('id'), function(data){
                instance.content(data);
                helper.origin.data('loaded', true);
            });
        }
    }
});

Этот пример демонстрирует использование HTML-контента, асинхронной загрузки данных, интерактивности и контроля отображения с задержкой и анимацией.

Оглавление