Dropdown списки

Tippy.js — это лёгкая и гибкая библиотека для создания всплывающих подсказок, тултипов и Dropdown списков в JavaScript. Она построена на Popper.js, что обеспечивает точное позиционирование и возможность работы с динамическим контентом.

Инициализация Tippy.js

Для начала необходимо подключить библиотеку через npm или CDN:

// через npm
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

// или через CDN

Создание простой подсказки осуществляется вызовом функции tippy():

tippy('#button', {
  content: 'Пример всплывающей подсказки'
});

Здесь #button — селектор элемента, к которому привязывается тултип, а content — текст или HTML-содержимое подсказки.

Создание Dropdown списка

Tippy.js позволяет реализовать полноценные Dropdown списки с интерактивным контентом. Для этого используется опция interactive и передача HTML-контента через content:

tippy('#dropdownButton', {
  content: document.querySelector('#dropdownContent').innerHTML,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
  placement: 'bottom-start',
  hideOnClick: true
});
  • allowHTML: true разрешает использование HTML внутри подсказки.
  • interactive: true позволяет пользователю взаимодействовать с элементами внутри тултипа, например, нажимать на ссылки или кнопки.
  • trigger: 'click' делает Dropdown активным по клику.
  • placement: 'bottom-start' определяет позицию списка относительно кнопки.

Динамический контент Dropdown

Для динамических меню удобно использовать функцию в content, которая возвращает актуальный HTML:

tippy('#dropdownButton', {
  content: () => {
    const items = ['Пункт 1', 'Пункт 2', 'Пункт 3'];
    return `
    ${items.map(item => `
  • ${item}
    • `).join('')}
`;
  },
  allowHTML: true,
  interactive: true,
  trigger: 'click'
});

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

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

Tippy.js предоставляет гибкие настройки поведения:

  • delay — задержка перед показом и скрытием подсказки:
tippy('#dropdownButton', {
  content: 'Меню с задержкой',
  delay: [200, 100], // [показ, скрытие] в мс
});
  • animation — анимация появления/исчезновения:
tippy('#dropdownButton', {
  content: 'Анимированный Dropdown',
  animation: 'scale', // другие варианты: fade, shift-away, shift-toward
});
  • interactiveBorder — область, в которой курсор может находиться, чтобы меню не скрывалось. Полезно для сложных Dropdown с большим количеством элементов.

Управление состоянием Dropdown через методы Tippy.js

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

const dropdown = tippy('#dropdownButton', {
  content: 'Пример меню',
  interactive: true,
  trigger: 'click'
})[0]; // возвращает массив тултипов

dropdown.show();   // открыть меню
dropdown.hide();   // закрыть меню
dropdown.destroy(); // удалить тултип

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

Вложенные Dropdown и мультиуровневые меню

Tippy.js поддерживает сложные структуры с вложенными списками. Для этого каждый вложенный Dropdown создается отдельно с trigger: 'mouseenter' и interactive: true:

tippy('.nested-button', {
  content: document.querySelector('#nestedContent').innerHTML,
  allowHTML: true,
  interactive: true,
  trigger: 'mouseenter',
  placement: 'right-start'
});

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

Стилизация и кастомизация

Tippy.js позволяет применять свои классы для кастомного оформления:

tippy('#dropdownButton', {
  content: '
  • Пункт 1
  • Пункт 2
',
  allowHTML: true,
  interactive: true,
  theme: 'custom-theme'
});

CSS для темы:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
}
.tippy-box[data-theme~='custom-theme'] .tippy-content {
  padding: 0;
}

Это позволяет полностью контролировать внешний вид Dropdown, делая его интегрированным с дизайном приложения.

Обработка событий

Tippy.js поддерживает события жизненного цикла: onShow, onShown, onHide, onHidden:

tippy('#dropdownButton', {
  content: 'Меню с событиями',
  interactive: true,
  trigger: 'click',
  onShow(instance) {
    console.log('Dropdown открылся', instance);
  },
  onHide(instance) {
    console.log('Dropdown закрылся', instance);
  }
});

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

Закрепление и смещение меню

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

tippy('#dropdownButton', {
  content: 'Смещение меню',
  interactive: true,
  trigger: 'click',
  placement: 'bottom',
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10] // смещение по X и Y
        }
      }
    ]
  }
});

С помощью этих настроек можно компенсировать отступы, бордеры и позиционировать Dropdown точно по макету.

Оглавление