Popover и Tooltip

В SvelteKit UI библиотеках Popover и Tooltip представляют собой интерактивные компоненты для отображения вспомогательной информации поверх основного контента. Несмотря на внешнее сходство, они различаются по поведению и назначению: Tooltip обычно используется для кратких подсказок при наведении, а Popover — для более сложного контента, включая интерактивные элементы.

Основные концепции

Tooltip

  • Назначение: краткая текстовая подсказка при наведении или фокусе на элементе.
  • Триггеры: hover, focus, иногда click.
  • Позиционирование: чаще всего используется вокруг целевого элемента с возможностью указания top, bottom, left, right.
  • Стилизация: минималистичный дизайн, без интерактивных элементов внутри.

Пример базового использования:

<script>
  import { Tooltip } from 'sveltekit-ui';
</script>

<button use:Tooltip={{ content: "Нажмите для отправки" }}>
  Отправить
</button>

Здесь use:Tooltip — это Svelte action, который автоматически добавляет событие hover/focus для показа подсказки.

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

  • Tooltip появляется автоматически при наведении.
  • Может быть ограничен по времени отображения или исчезать при уходе курсора.
  • Позволяет задавать задержку появления (delay) и исчезновения (duration).
<button use:Tooltip={{ content: "Сохранить изменения", delay: 300, duration: 500 }}>
  Сохранить
</button>

Popover

  • Назначение: контейнер для более сложного содержимого, включая кнопки, формы, списки.
  • Триггеры: чаще click, иногда hover.
  • Позиционирование: гибкое, с поддержкой автоматического смещения и привязки к элементу.
  • Контент: может быть любой Svelte компонент или HTML, включая интерактивные элементы.

Пример базового Popover:

<script>
  import { Popover, PopoverTrigger, PopoverContent } from 'sveltekit-ui';
</script>

<Popover>
  <PopoverTrigger>
    <button>Открыть настройки</button>
  </PopoverTrigger>
  <PopoverContent>
    <ul>
      <li><button>Профиль</button></li>
      <li><button>Настройки</button></li>
      <li><button>Выйти</button></li>
    </ul>
  </PopoverContent>
</Popover>

Особенности Popover:

  • Контент остается интерактивным после открытия.
  • Поддерживает закрытие по клику вне элемента (closeOnOutsideClick) и по клавише Esc.
  • Может содержать сложные вложенные структуры.
<Popover closeOnOutsideClick={true}>
  <PopoverTrigger>
    <button>Меню пользователя</button>
  </PopoverTrigger>
  <PopoverContent>
    <form>
      <label>
        Имя
        <input type="text" />
      </label>
      <button type="submit">Сохранить</button>
    </form>
  </PopoverContent>
</Popover>

Позиционирование и адаптивность

SvelteKit UI библиотеки используют системы floating positioning, которые автоматически рассчитывают положение Tooltip и Popover с учетом границ окна:

  • placement: определяет ориентацию (top, bottom, left, right).
  • offset: смещение относительно триггера.
  • flip: автоматически меняет сторону, если на выбранной позиции мало места.

Пример для Tooltip:

<button use:Tooltip={{ content: "Информация", placement: "right", offset: 10, flip: true }}>
  Наведи на меня
</button>

Пример для Popover:

<Popover placement="bottom" offset={12} flip={true}>
  <PopoverTrigger>
    <button>Подробнее</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Содержимое Popover может быть длинным и включать интерактивные элементы.</p>
  </PopoverContent>
</Popover>

Управление состоянием

Tooltip обычно управляется автоматически, но возможно ручное управление с помощью store:

<script>
  import { Tooltip } from 'sveltekit-ui';
  import { writable } from 'svelte/store';

  const open = writable(false);
</script>

<button use:Tooltip={{ content: "Детали", open }}>
  Держи курсор
</button>

Popover имеет полноценный API для управления состоянием:

<script>
  import { Popover } from 'sveltekit-ui';
  let isOpen = false;
</script>

<Popover bind:open={isOpen}>
  <PopoverTrigger>
    <button on:click={() => isOpen = !isOpen}>Меню</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Контент управляется через переменную isOpen</p>
  </PopoverContent>
</Popover>

Анимации и transitions

SvelteKit UI поддерживает стандартные Svelte transitions для плавного появления и исчезновения:

<Popover transition={{ duration: 200, type: 'fade' }}>
  <PopoverTrigger>
    <button>Открыть Popover</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Анимация через fade</p>
  </PopoverContent>
</Popover>

Для Tooltip также можно применять анимацию появления:

<button use:Tooltip={{ content: "Пример", transition: { duration: 150, type: 'scale' } }}>
  Hover me
</button>

Лучшие практики

  • Tooltip использовать только для кратких подсказок; интерактивный контент в Tooltip не поддерживается.
  • Popover подходит для форм, меню и любых компонентов, требующих действий пользователя.
  • Всегда указывать placement и offset для точного позиционирования.
  • При использовании Popover с интерактивным контентом включать closeOnOutsideClick.
  • Использовать анимации аккуратно, чтобы не замедлять интерфейс и не мешать UX.

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

Оглавление