Использование с jQuery

Для работы Tooltipster требуется jQuery версии 1.7 и выше. Подключение библиотеки осуществляется стандартным способом через <script> и <link> для стилей:

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

Важно: порядок подключения имеет значение — сначала jQuery, затем Tooltipster.

Инициализация Tooltipster

Инициализация производится с помощью метода .tooltipster() на выбранных элементах:

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

По умолчанию тултип появляется при наведении курсора и исчезает при его уходе. Можно настроить поведение через объект опций:

$('.tooltip-element').tooltipster({
    animation: 'fade',         // Анимация появления/исчезновения
    delay: 200,                // Задержка перед появлением (в мс)
    theme: 'tooltipster-shadow', // Применяемая тема
    trigger: 'hover',          // Событие, вызывающее тултип
    contentAsHTML: true        // Разрешение HTML в контенте
});

Настройка контента тултипа

Tooltipster позволяет задавать статический и динамический контент. Статический контент указывается при инициализации:

$('.tooltip-element').tooltipster({
    content: 'Простой текст тултипа'
});

Для динамического контента можно использовать колбэк functionBefore:

$('.tooltip-element').tooltipster({
    functionBefore: function(instance, helper){
        var $origin = $(helper.origin);
        instance.content('Данные для: ' + $origin.data('info'));
    }
});

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

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

Tooltipster поддерживает несколько событий, доступных через API:

  • instance.show() — показать тултип
  • instance.hide() — скрыть тултип
  • instance.destroy() — удалить тултип
  • instance.content(newContent) — изменить контент динамически

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

var instance = $('.tooltip-element').tooltipster().tooltipster('instance');

$('#show-btn').on('click', function(){
    instance.show();
});

$('#hide-btn').on('click', function(){
    instance.hide();
});

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

Tooltipster имеет систему тем, позволяющую легко менять внешний вид:

$('.tooltip-element').tooltipster({
    theme: ['tooltipster-borderless', 'custom-theme']
});
  • tooltipster-shadow — стандартная теневая тема
  • tooltipster-borderless — без рамок, только контент
  • Возможность создавать кастомные темы через CSS, например:
.custom-theme .tooltipster-box {
    background-color: #333;
    color: #fff;
    border-radius: 6px;
}

Анимации и позиции

Tooltipster поддерживает несколько видов анимаций: fade, grow, swing, slide, fall. Позиция тултипа задается параметром side:

$('.tooltip-element').tooltipster({
    animation: 'grow',
    side: 'top',     // top, bottom, left, right
    distance: 10     // отступ от элемента
});
  • multiple: false — запретить появление нескольких тултипов одновременно
  • maxWidth — ограничение ширины тултипа
  • minWidth — минимальная ширина для корректного отображения

Совместимость с HTML-контентом

Tooltipster корректно отображает HTML-контент, что полезно для списков, ссылок и картинок:

$('.tooltip-element').tooltipster({
    contentAsHTML: true,
    content: '<strong>Важное сообщение:</strong> <a href="#">подробности</a>'
});

Для динамических HTML-тултипов через functionBefore или AJAX:

$('.tooltip-element').tooltipster({
    contentAsHTML: true,
    functionBefore: function(instance, helper){
        $.ajax({
            url: '/getTooltipData',
            success: function(data){
                instance.content(data);
            }
        });
    }
});

Продвинутое использование с jQuery

Группировка элементов:

$('.has-tooltip').tooltipster({
    multiple: true,   // Несколько тултипов одновременно
    interactive: true // Возможность взаимодействия с контентом
});

Интерактивные тултипы:

$('.interactive-element').tooltipster({
    interactive: true,
    trigger: 'click',  // Взаимодействие по клику
    side: 'bottom'
});

Поддержка событий jQuery:

Tooltipster интегрируется с любыми jQuery-событиями:

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

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

Работа с большим количеством элементов

При большом количестве элементов рекомендуется использовать делегирование событий:

$(document).on('mouseenter', '.tooltip-element', function(){
    $(this).tooltipster({
        content: 'Динамический контент',
        theme: 'tooltipster-shadow'
    });
});

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

Ключевые параметры Tooltipster для jQuery

Параметр Описание
content Текст или HTML, отображаемый в тултипе
contentAsHTML Разрешение HTML-контента
animation Тип анимации появления
delay Задержка перед появлением
trigger Событие вызова тултипа (hover, click, custom)
interactive Возможность взаимодействия с контентом
theme Тема для стилизации тултипа
side Сторона отображения тултипа
functionBefore Колбэк перед появлением тултипа (динамический контент)
maxWidth, minWidth Ограничения ширины тултипа

Tooltipster в связке с jQuery предоставляет гибкий и мощный инструмент для создания интерактивных, настраиваемых подсказок с динамическим контентом, поддержкой HTML, тем и сложной логики событий.

Оглавление