Параметры задержек

Tippy.js предоставляет гибкие инструменты управления появлением и исчезновением всплывающих подсказок, в том числе через параметры задержки. Управление задержками позволяет добиться более естественного взаимодействия пользователя с интерфейсом и избежать резкого мерцания подсказок при случайных наведениях.

Определение параметров delay

Параметр delay отвечает за время, которое проходит до появления или скрытия тултипа. Он может быть задан двумя способами:

  1. Числовое значение — задержка применяется одинаково для появления и скрытия:
tippy('#button', {
  content: 'Пример подсказки',
  delay: 500, // 500 миллисекунд для появления и скрытия
});
  1. Массив из двух чисел — первый элемент задаёт задержку перед показом, второй — перед скрытием:
tippy('#button', {
  content: 'Пример подсказки',
  delay: [300, 700], // 300 мс перед показом, 700 мс перед скрытием
});

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

Влияние задержек на UX

  • Малая задержка на показ повышает отзывчивость интерфейса, но может вызывать мерцание при случайных наведениях.
  • Большая задержка на скрытие позволяет пользователю быстрее повторно активировать подсказку при кратковременных уходах курсора с элемента.
  • Комбинация короткой задержки на показ и длинной на скрытие часто применяется для кнопок и интерактивных элементов с частым наведением.

Использование динамических значений

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

tippy('#button', {
  content: 'Динамическая задержка',
  delay: (instance) => {
    if (instance.props.content.length > 20) {
      return [500, 1000]; // длинные подсказки показываются медленнее
    }
    return [100, 300];
  }
});

Функция получает объект instance, что позволяет адаптировать задержку индивидуально для каждого тултипа.

Связь delay с анимацией

Tippy.js интегрируется с CSS-анимациями и transition-эффектами. Параметр delay влияет на время между событием и началом анимации:

tippy('#button', {
  content: 'Анимированная подсказка',
  animation: 'scale',
  delay: [200, 600]
});
  • 200 мс проходит до запуска анимации появления.
  • 600 мс — перед запуском анимации скрытия.

Корректное использование задержек совместно с анимацией позволяет добиться плавного визуального эффекта без дерганий.

Параметр showOnCreate

По умолчанию delay применяется только на события mouseenter и mouseleave. При использовании showOnCreate: true задержка также влияет на первое отображение:

tippy('#button', {
  content: 'Показ сразу после создания',
  delay: [300, 500],
  showOnCreate: true
});
  • Подсказка появится через 300 мс после инициализации.
  • Скрытие будет происходить через 500 мс после ухода курсора.

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

  • Для элементов с быстрым взаимодействием используют короткие задержки на показ: [0-100, 300-500].
  • Для длинных подсказок или сложных интерфейсов целесообразно увеличивать задержку на скрытие, чтобы пользователь успел прочитать информацию.
  • Динамические функции позволяют адаптировать задержку под контент, предотвращая мгновенное исчезновение подсказок при случайных движениях мыши.
  • Комбинация задержек с анимациями повышает визуальную привлекательность и делает интерфейс более интуитивным.

Понимание и грамотное использование параметров delay в Tippy.js позволяет создавать интерфейсы с аккуратным, контролируемым поведением подсказок, улучшая удобство использования и восприятие информации пользователем.

Оглавление