Событие hover

Tooltipster — это современная библиотека для создания подсказок (tooltips) в JavaScript, которая позволяет управлять их появлением, поведением и стилем через гибкие настройки и события. Одним из ключевых событий для интерактивных подсказок является hover, отвечающее за отображение тултипа при наведении курсора на элемент.

Подключение и инициализация

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

$('.tooltip-element').tooltipster({
    content: 'Это подсказка',
    theme: 'tooltipster-light',
    trigger: 'hover'
});
  • content — текст или HTML-содержимое тултипа.
  • theme — визуальная тема подсказки.
  • trigger: 'hover' — ключевая настройка, отвечающая за событие наведения мыши.

Если не указывать trigger, по умолчанию используется hover.

Настройки поведения при hover

Tooltipster предоставляет ряд опций, которые позволяют детально настраивать реакцию тултипа на наведение:

  1. delay — задержка перед появлением или скрытием подсказки:
$('.tooltip-element').tooltipster({
    trigger: 'hover',
    delay: 300
});
  • Устанавливает задержку в миллисекундах перед появлением или исчезновением подсказки.
  • Позволяет избежать “мигания” при случайном коротком наведении курсора.
  1. animation — анимация появления/скрытия:
$('.tooltip-element').tooltipster({
    trigger: 'hover',
    animation: 'fade'
});
  • Доступные варианты: 'fade', 'grow', 'swing', 'slide', 'fall'.
  • Анимация делает появление подсказки более плавным и приятным визуально.
  1. interactive — делает подсказку интерактивной:
$('.tooltip-element').tooltipster({
    trigger: 'hover',
    interactive: true
});
  • Позволяет взаимодействовать с содержимым тултипа (например, кликать по кнопкам внутри подсказки), не закрывая её при уходе курсора с основного элемента.
  1. functionBefore и functionReady — хуки перед показом и после показа тултипа:
$('.tooltip-element').tooltipster({
    trigger: 'hover',
    functionBefore: function(instance, helper){
        console.log('Подсказка готовится к показу');
    },
    functionReady: function(instance, helper){
        console.log('Подсказка отображена');
    }
});
  • functionBefore выполняется до показа тултипа. Можно использовать для динамической подстановки содержимого.
  • functionReady вызывается сразу после появления тултипа.

Программное управление hover

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

  • Показ тултипа:
$('.tooltip-element').tooltipster('show');
  • Скрытие тултипа:
$('.tooltip-element').tooltipster('hide');
  • Проверка состояния:
var isOpen = $('.tooltip-element').tooltipster('status');
console.log(isOpen); // true или false

Эти методы полезны, когда требуется сочетание события hover с другими триггерами, например кликом или программным событием.

Работа с делегированием событий

Tooltipster поддерживает делегирование, что важно при динамически добавляемых элементах:

$(document).tooltipster({
    selector: '.dynamic-tooltip',
    trigger: 'hover',
    content: 'Динамический тултип'
});
  • Все элементы с классом .dynamic-tooltip, добавленные после загрузки страницы, автоматически получат тултип.
  • Удобно для интерфейсов с динамическим контентом, такими как таблицы и списки.

Учет особенностей hover на мобильных устройствах

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

$('.tooltip-element').tooltipster({
    trigger: 'hover',
    touchDevices: true
});
  • Опция touchDevices: true позволяет показывать тултипы при касании пальцем.
  • Это предотвращает потерю интерактивности на смартфонах и планшетах.

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

  • Использовать delay не меньше 200–300 мс для комфортного восприятия.
  • Для интерактивных элементов внутри тултипа обязательно включать interactive: true.
  • Для динамически загружаемого контента применять делегирование через selector.
  • Не использовать hover-тултипы для слишком маленьких элементов, иначе пользователь может случайно закрыть подсказку.

Пример комплексной конфигурации

$('.tooltip-element').tooltipster({
    content: $('<span>Интерактивная подсказка с кнопкой</span><button>Нажми</button>'),
    theme: 'tooltipster-shadow',
    trigger: 'hover',
    interactive: true,
    delay: 250,
    animation: 'grow',
    functionBefore: function(instance, helper){
        console.log('Подсказка готовится');
    },
    functionReady: function(instance, helper){
        console.log('Подсказка показана');
    }
});
  • Комбинация интерактивности, задержки и анимации обеспечивает комфортное взаимодействие.
  • functionBefore позволяет динамически менять содержимое или подгружать данные при наведении.

Эта функциональность hover делает Tooltipster мощным инструментом для реализации удобных и интерактивных подсказок в любых веб-приложениях.

Оглавление