Popover

Плавающий контейнер со стрелкой-указателем, открывающийся рядом с элементом-триггером. Используется для дополнительных действий, форм, подсказок и вложенных меню. Позиционирование — через @cloud-ru/ds-popover-private (Floating UI), со стрелкой и auto-flip при нехватке места.

Когда использовать

• Выпадающий блок действий над таблицей или карточкой.
• Inline-форма («Переименовать», «Добавить метку»).
• Контекстная подсказка, которой мало пространства Tooltip’а.

Когда не нужен: модальный диалог (берите Modal), статичная подсказка с коротким текстом (берите Tooltip), выпадающее меню выбора (берите Select/DropdownMenu).

Анатомия

Placement

12 вариантов — базовая сторона (top|right|bottom|left) × выравнивание (-start по началу триггера, -end по концу, без суффикса — по центру). При нехватке места автоматически подменяется fallback из DEFAULT_FALLBACK_PLACEMENTS.

Trigger

Источник открытия: click (дефолт), hover, focus / focusVisible, композиты hoverAndFocus, hoverAndFocusVisible, clickAndFocusVisible — для контролов, открываемых и мышью, и с клавиатуры.

Popover width strategy

Ширина поповера относительно триггера: auto — по контенту; gte — не меньше триггера; eq — ровно как триггер.

Popover height strategy

Высота поповера относительно доступного пространства: auto — по контенту; lte — не больше доступного; eq — точно по доступному.

Установка

pnpm add @cloud-ru/ds-popover

import { Popover, PLACEMENT, TRIGGER } from '@cloud-ru/ds-popover'

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

Базовый Popover

import { Popover } from '@cloud-ru/ds-popover';

export function Basic() {
  return (
    <Popover content='Подсказка для пользователя' placement='top' trigger='click'>
      <button type='button'>Открыть поповер</button>
    </Popover>
  );
}

Триггер по наведению

import { Popover } from '@cloud-ru/ds-popover';

export function HoverTrigger() {
  return (
    <Popover content='Открывается при наведении' trigger='hover' placement='top'>
      <button type='button'>Наведи курсор</button>
    </Popover>
  );
}

Placement bottom-end

import { Popover } from '@cloud-ru/ds-popover';

export function Placement() {
  return (
    <Popover content='Снизу справа' placement='bottom-end' trigger='click'>
      <button type='button'>bottom-end</button>
    </Popover>
  );
}

Props

Types

PopoverProps

Related props

ChildrenFunction

OutsideClickHandler

Placement

PopoverHeightStrategy

PopoverWidthStrategy

StopPropagationHandlers

Trigger

Storybook

Figma