Popover (всплывающее окно)

Похож на Tooltip, но может содержать заголовок и более богатый контент (HTML-структуры, списки и т. д.); срабатывает по клику или при наведении.

Базовое использование

Расположения, способы срабатывания и стрелка

import { LhButton, LhPopover } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopover title="Заголовок" content="Содержимое всплывающего окна." placement="top">
      <LhButton>Сверху</LhButton>
    </LhPopover>
  )
}

Popover Props

Свойство	Описание	Тип	Варианты	По умолчанию
children	Узел-триггер	ReactNode	—	—
title	Заголовок (рендерится в области __title)	ReactNode	—	—
content	Содержимое (рендерится в области __content)	ReactNode	—	—
placement	Расположение	LhPopoverPlacement	top / bottom / left / right (с -start / -end)	'top'
trigger	Способ срабатывания	LhPopoverTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	Отключить всплывающее окно	boolean	—	false
arrow	Показывать ли стрелку	boolean	—	true
width	Ширина оверлея	string | number	—	—
visible	Контролируемая видимость	boolean	—	—
defaultVisible	Неконтролируемая видимость по умолчанию	boolean	—	false
showAfter	Задержка показа (мс; по умолчанию 200 для защиты от случайных срабатываний)	number	—	200
hideAfter	Задержка скрытия (мс; по умолчанию 100, чтобы указатель успел перейти в оверлей)	number	—	100
popperClass	Пользовательское имя класса оверлея	string	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
bgPattern	Фоновый узор на уровне компонента	string	—	—
sx	Сокращённые props макета (применяются к триггеру)	SxProps	—	—

События Popover

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onVisibleChange	Изменение видимости (срабатывает и в контролируемом, и в неконтролируемом режимах)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — корневой элемент триггера. LhPopoverInstance предоставляет show() / hide() / toggle() / isVisible.

Перехват фокуса

При trigger="click" оверлей перехватывает фокус по семантике диалогового окна (Tab циклически перемещается внутри), а при закрытии возвращает его; триггеры hover / focus фокус не захватывают — это согласуется с поведением isModal в plus.

Доступность

Оверлей имеет role="dialog"; при наличии заголовка он связывается через aria-labelledby, а триггер связывается с оверлеем через aria-describedby.

Стили

import '@lh-ui/react/style/popover'