Unit-тестирование

Для использования Tooltipster необходимо подключить библиотеку и её CSS-файлы. Обычно это делается через <link> и <script>:

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

После подключения элементов можно инициализировать тултипы на выбранных элементах с помощью jQuery:

$('.tooltip').tooltipster();

По умолчанию Tooltipster применяет простую анимацию и стандартное поведение появления тултипа при наведении.

Настройка содержимого тултипа

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

  1. Статический текст:
$('.tooltip').tooltipster({
    content: 'Простой текст тултипа'
});
  1. HTML-контент:
$('.tooltip-html').tooltipster({
    content: $('<span style="color:red">HTML-тултип</span>'),
    allowHTML: true
});

Использование HTML позволяет добавлять стилизованные элементы, изображения или ссылки. Параметр allowHTML обязательно должен быть установлен в true.

  1. Динамический контент через функцию:
$('.tooltip-dynamic').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper){
        // Динамическая генерация контента
        var $origin = $(helper.origin);
        var dynamicContent = 'Дата: ' + new Date().toLocaleTimeString();
        instance.content(dynamicContent);
    }
});

Настройка триггеров отображения

Tooltipster поддерживает несколько типов триггеров:

  • hover – появляется при наведении мыши.
  • click – появляется при клике на элемент.
  • custom – управление показом и скрытием вручную.

Пример:

$('.tooltip-click').tooltipster({
    trigger: 'click'
});

Для полного контроля можно использовать trigger: 'custom' и методы API:

var instance = $('.tooltip-manual').tooltipster().tooltipster('instance');
instance.show(); // Показать тултип
instance.hide(); // Скрыть тултип

Анимации и темы

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

  • fade
  • grow
  • swing
  • slide
$('.tooltip-animate').tooltipster({
    animation: 'grow',
    animationDuration: 300
});

Темы позволяют быстро менять визуальное оформление тултипа. Например:

$('.tooltip-theme').tooltipster({
    theme: 'tooltipster-light'
});

Можно создавать свои темы через CSS, переопределяя стили .tooltipster-*.

Позиционирование тултипов

Tooltipster автоматически рассчитывает позицию, но её можно зафиксировать или ограничить:

$('.tooltip-position').tooltipster({
    side: ['top', 'bottom', 'right', 'left'],
    distance: 10
});

Параметр side принимает массив, в котором перечислены допустимые стороны появления тултипа. Tooltipster будет выбирать первую доступную сторону, где тултип помещается в окне.

distance определяет расстояние между тултипом и элементом.

Взаимодействие с событиями

Tooltipster предоставляет обширный набор событий для кастомного поведения:

  • show – вызывается перед показом тултипа.
  • shown – вызывается после появления.
  • hide – вызывается перед скрытием.
  • hidden – вызывается после скрытия.
  • position – вызывается при вычислении позиции тултипа.

Пример использования события shown:

$('.tooltip-events').tooltipster({
    functionAfter: function(instance, helper){
        console.log('Тултип появился на элементе', helper.origin);
    }
});

Работа с асинхронными данными

Tooltipster легко интегрируется с AJAX-запросами:

$('.tooltip-ajax').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper){
        if (!instance.data('loaded')) {
            $.get('/tooltip-data', function(data){
                instance.content(data);
                instance.data('loaded', true);
            });
        }
    }
});

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

Настройка размеров и ограничения

Для контроля размеров тултипа можно использовать CSS-свойства или параметры Tooltipster:

$('.tooltip-size').tooltipster({
    maxWidth: 300,
    minWidth: 100,
    contentAsHTML: true
});

maxWidth и minWidth ограничивают ширину тултипа. Параметр contentAsHTML позволяет применять HTML внутри ограниченного блока.

API Tooltipster

Ключевые методы:

  • content(newContent) – получить или изменить содержимое.
  • open() / show() – показать тултип.
  • close() / hide() – скрыть тултип.
  • destroy() – полностью удалить тултип с элемента.
  • reposition() – пересчитать позицию тултипа.

Пример:

var tooltip = $('.tooltip-api').tooltipster().tooltipster('instance');
tooltip.content('Новый контент');
tooltip.show();

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

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

$(document).on('mouseenter', '.dynamic-tooltip', function(){
    $(this).tooltipster({
        content: 'Динамический тултип'
    });
});

Такой подход гарантирует, что каждый новый элемент получит корректный тултип при наведении.

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

  • Инициализация тултипов только на необходимых элементах.
  • Использование одного общего экземпляра для однотипных элементов через делегирование.
  • Загрузка динамического контента только по необходимости.
  • Минимизация HTML-контента и сложной анимации для большого количества тултипов.

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

Оглавление