Наведение курсора

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

tippy('#myButton', {
  content: 'Это подсказка при наведении',
  placement: 'top',
  trigger: 'mouseenter',
});

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

  • content — текст или HTML, который будет отображён во всплывающей подсказке.
  • placement — позиция относительно элемента (top, bottom, left, right).
  • trigger — событие, вызывающее подсказку. Для наведения используется 'mouseenter' (по умолчанию).

Управление задержкой появления и исчезновения

Tippy.js позволяет контролировать время, через которое подсказка появляется и скрывается. Для этого используются опции delay и duration:

tippy('#myButton', {
  content: 'Подсказка с задержкой',
  delay: [500, 200], // [задержка появления, задержка скрытия] в миллисекундах
  duration: [300, 300], // анимация появления и скрытия
});
  • Задержка появления предотвращает мгновенное срабатывание при случайном наведении.
  • Задержка скрытия улучшает пользовательский опыт, позволяя легко перемещать курсор на подсказку.

Использование HTML-содержимого

Tippy.js поддерживает HTML-контент для сложных подсказок:

tippy('#myButton', {
  content: `
    <div>
      <strong>Заголовок</strong>
      <p>Описание с форматированием</p>
    </div>
  `,
  allowHTML: true,
  interactive: true,
});
  • allowHTML: true разрешает рендер HTML в подсказке.
  • interactive: true позволяет взаимодействовать с элементами внутри подсказки (например, кнопками или ссылками).

Анимации и стилизация

Для улучшения визуального восприятия Tippy.js предоставляет встроенные анимации и возможность кастомизации стилей:

tippy('#myButton', {
  content: 'Подсказка с анимацией',
  animation: 'scale', // варианты: fade, scale, shift-away
  theme: 'light-border', // предустановленные темы или кастомные
});
  • animation определяет тип появления подсказки.
  • theme позволяет применять готовые стили или создавать свои CSS-классы для оформления.

Интерактивные подсказки при наведении

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

tippy('#menuButton', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  delay: [100, 300],
});
  • Это предотвращает мгновенное скрытие подсказки при перемещении курсора с триггерного элемента на подсказку.
  • Позволяет реализовать выпадающие меню или сложные панели инструментов внутри подсказки.

Совместное использование с Popper.js

Tippy.js построен на Popper.js, что позволяет управлять позиционированием подсказки:

tippy('#myButton', {
  content: 'Подсказка с умным позиционированием',
  placement: 'auto', // автоматический выбор позиции
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10], // смещение по горизонтали и вертикали
        },
      },
    ],
  },
});
  • placement: 'auto' позволяет автоматически выбрать позицию, чтобы подсказка не выходила за пределы видимой области.
  • popperOptions даёт полный контроль над поведением Popper.js, включая смещения, ограничения и стратегии позиционирования.

Группировка подсказок и делегирование событий

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

tippy.delegate(document.body, {
  target: '.tooltip', // все элементы с классом .tooltip
  content: (reference) => reference.getAttribute('data-tip'),
});
  • Позволяет автоматически применять подсказки ко множеству элементов без индивидуальной инициализации.
  • Поддерживает динамически добавленные элементы, что удобно для SPA и динамических интерфейсов.

Реакция на состояние курсора

Опции onShow, onHide и onTrigger позволяют выполнять кастомные действия при наведении:

tippy('#myButton', {
  content: 'Подсказка с колбэками',
  onShow(instance) {
    console.log('Подсказка показана', instance);
  },
  onHide(instance) {
    console.log('Подсказка скрыта', instance);
  },
});
  • onShow вызывается перед показом подсказки.
  • onHide вызывается перед её скрытием.
  • Можно использовать для динамического обновления содержимого или запуска анимаций.

Подсказки с постоянным отображением на наведении

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

tippy('#myButton', {
  content: 'Постоянная подсказка',
  interactive: true,
  sticky: true,
});
  • sticky: true удерживает подсказку, даже если курсор уходит на секунду.
  • В сочетании с interactive позволяет создавать расширенные панели и информативные всплывающие окна.

Итоговая структура подсказки

Эффективная подсказка при наведении в Tippy.js должна учитывать:

  • Тип содержимого (text или HTML).
  • Позиционирование и смещение.
  • Время задержки появления и скрытия.
  • Возможность взаимодействия с подсказкой (interactive).
  • Анимацию и стиль оформления.
  • Контроль через колбэки (onShow, onHide).

Эти инструменты позволяют создавать высоко кастомизируемые и динамичные всплывающие подсказки, которые улучшают взаимодействие пользователя с интерфейсом.

Оглавление