Минимальное время показа

Tooltipster предоставляет возможность управлять временем отображения подсказок с помощью опции delay. Однако для точного контроля над минимальным временем показа используется параметр minWidth совместно с событиями open и close, либо более специализированные настройки в последней версии плагина. Минимальное время показа задаёт интервал, в течение которого тултип остаётся видимым, даже если пользователь сразу покидает элемент.

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

Опция delay управляет задержкой перед показом тултипа:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки',
    delay: 300 // задержка в миллисекундах перед появлением
});
  • Тип: число (миллисекунды)
  • Поведение: если пользователь быстро наведет курсор и уберёт, тултип может даже не успеть показаться.

Для минимального времени отображения delay недостаточно, поэтому применяются дополнительные методы.

Минимальное время показа через события

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

let minShowTime = 1000; // минимальное время отображения в мс

$('.tooltip-element').tooltipster({
    content: 'Тултип с минимальным временем',
    trigger: 'hover',
    functionReady: function(instance, helper){
        const startTime = Date.now();
        helper.origin.dataset.tooltipStart = startTime;
    },
    functionBefore: function(instance, helper){
        const startTime = helper.origin.dataset.tooltipStart;
        if (startTime){
            const elapsed = Date.now() - startTime;
            if (elapsed < minShowTime){
                return new Promise(resolve => setTimeout(resolve, minShowTime - elapsed)).then(() => true);
            }
        }
        return true;
    }
});
  • functionReady срабатывает, когда тултип готов к показу.
  • functionBefore позволяет отсрочить закрытие до истечения минимального времени.
  • Используется Promise, чтобы асинхронно задержать скрытие.

Настройка минимального времени показа через animationDuration

Если требуется плавная анимация с контролем времени видимости, можно настроить animationDuration совместно с таймерами:

$('.tooltip-element').tooltipster({
    content: 'Анимированный тултип',
    animationDuration: 400,
    functionBefore: function(instance, helper){
        if (!helper.origin.dataset.showTimestamp){
            helper.origin.dataset.showTimestamp = Date.now();
        }
    },
    functionAfter: function(instance, helper){
        const elapsed = Date.now() - helper.origin.dataset.showTimestamp;
        const remaining = 800 - elapsed; // 800 мс минимального показа
        if (remaining > 0){
            return new Promise(resolve => setTimeout(resolve, remaining)).then(() => {});
        }
    }
});
  • functionAfter срабатывает после начала закрытия тултипа.
  • Асинхронная задержка обеспечивает соблюдение минимального времени показа.
  • animationDuration определяет скорость появления и исчезновения, но минимальное время можно контролировать независимо.

Важные нюансы

  1. Совмещение с триггерами: минимальное время показа особенно важно при trigger: hover и trigger: click. Для клика можно комбинировать с autoClose: false, чтобы тултип не исчезал раньше времени.
  2. Мобильные устройства: на тачскринах задержка может быть проигнорирована, если плагин переключается на оптимизированное поведение для сенсорного интерфейса.
  3. Несколько тултипов: при множественных подсказках с различными минимальными временами стоит отслеживать отдельные таймеры для каждого элемента.
  4. Очистка данных: после закрытия тултипа рекомендуется удалять временные свойства DOM (dataset), чтобы не было конфликта при следующем открытии.

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

  • Минимальный показ 1 секунда для подсказок форм:
$('.form-input').tooltipster({
    content: 'Заполните поле корректно',
    delay: 200,
    functionAfter: function(instance, helper){
        const elapsed = Date.now() - helper.origin.dataset.showTimestamp;
        if (elapsed < 1000){
            return new Promise(resolve => setTimeout(resolve, 1000 - elapsed));
        }
    }
});
  • Контроль через кастомный таймер с анимацией:
$('.button-tooltip').tooltipster({
    content: 'Нажмите для действия',
    animation: 'fade',
    animationDuration: 300,
    functionBefore: function(instance, helper){
        helper.origin.dataset.startTime = Date.now();
    },
    functionAfter: function(instance, helper){
        const remaining = 1200 - (Date.now() - helper.origin.dataset.startTime);
        if (remaining > 0){
            return new Promise(resolve => setTimeout(resolve, remaining));
        }
    }
});

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

Оглавление