> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover

> Отображает контекстное содержимое, привязанное к триггеру.

## Обзор

Используйте `Popover` для контекстной информации или упрощённых элементов управления. Скомпонуйте его портал, обертку позиционирования и всплывающее окно по отдельности. Используйте [Dropdown](https://docs.twenty.com/ru/ui/components/navigation/dropdown.md) для меню, средств выбора и панелей с навигацией более высокого уровня.

**Light**

[Пример Popover (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-popover--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример Popover (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-popover--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-surfaces-popover--display)

## Использование

### Неконтролируемое состояние.

Используйте `defaultOpen`, чтобы задать начальную видимость. Поповер управляет последующими изменениями, инициированными его триггером, элементами управления закрытием и взаимодействиями для закрытия.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ContactDetailsPopover = () => (
  <Popover.Root defaultOpen={false}>
    <Popover.Trigger render={<Button>Show details</Button>} />
    <Popover.Portal>
      <Popover.Positioner align="start">
        <Popover.Popup
          style={{ boxSizing: 'border-box', width: 260, padding: 16, gap: 12 }}
        >
          <Popover.Title>Contact details</Popover.Title>
          <Popover.Description>
            Reach Alex at alex@example.com.
          </Popover.Description>
          <Popover.Close
            style={{ alignSelf: 'flex-end' }}
            render={<Button size="sm">Close</Button>}
          />
        </Popover.Popup>
      </Popover.Positioner>
    </Popover.Portal>
  </Popover.Root>
);
```

Значение `defaultOpen` по умолчанию — `false`, поэтому его можно не указывать. Используйте `Title` и `Description`, чтобы задать название и описание всплывающего окна. Триггер по умолчанию отображает кнопку; `render` позволяет указать совместимый элемент.

## Сравнение позиций

Сравните поддерживаемые стороны со стрелкой и без неё. В этих открытых примерах каждое всплывающее окно остаётся рядом со своим триггером для проверки; используйте пример Display, чтобы попробовать открыть и закрыть поповер.

**Light**

[Сравнение позиций для поповера (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-popover--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Сравнение позиций для поповера (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-popover--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-surfaces-popover--catalog)

## Анатомия

Размещайте триггер и всплывающее окно внутри `Popover.Root`. Всплывающее окно может содержать текст, элементы управления формы и действия.

```text theme={null}
Popover.Root
├── Popover.Trigger
└── Popover.Portal
    ├── Popover.Backdrop (optional)
    └── Popover.Positioner
        └── Popover.Popup
            ├── Popover.Arrow (optional)
            └── Popover.Viewport (optional)
                ├── Popover.Title
                ├── Popover.Description
                └── Popover.Close
```

| Компонент | Назначение и нативная цель |
| - | - |
| `Root` | Управляет состоянием, триггерами и взаимодействиями. Не рендерит элемент DOM. |
| `Триггер` | Открывает всплывающее окно и задает его якорь по умолчанию. Нацелен на кнопку. |
| `Portal` | Выбирает место назначения. Нативные props, обработчики, `render` и ref нацелены на его div. |
| `Positioner` | Управляет якорями, выравниванием, смещениями и обработкой коллизий. Нацеливается на свой div. |
| `Popup` | Рендерит содержимое и управляет фокусом. Нацелен на свой div. |
| `Arrow` | Необязательная стилизованная стрелка внутри Popup. Нацелен на свой div. |
| `Backdrop` | Необязательный фон верхнего уровня внутри Portal. Нацелен на свой div. |
| `Viewport` | Необязательный контейнер перехода для изменяющегося содержимого. Нацелен на свой div. |
| `Заголовок` | Предоставляет видимое доступное имя. Нацелен на h2. |
| `Description` | Связывает поясняющий текст. Нацелен на абзац. |
| `Закрыть` | Запрашивает закрытие. Нацелен на кнопку. |

Все отрендеренные части поддерживают установленные нативные атрибуты Base UI, обработчики, refs и композицию элементов/функций `render`. Пользовательские компоненты должны перенаправлять переданные props и ref. Каждая часть имеет публичный тип `Popover\<Part>Props` и `Popover\<Part>State`. `PopoverRootProps` и `PopoverTriggerProps` сохраняют дженерики payload. `PopoverHandle`, `PopoverRootActions`, `PopoverRootChangeEventDetails` и `PopoverRootChangeEventReason` также экспортируются из `twenty-ui/primitives/surfaces`.

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

Передайте `open` и обновляйте его с помощью `onOpenChange`, чтобы управлять видимостью этого же поповера в состоянии React.

```tsx theme={null}
import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ContactDetailsPopover = () => {
  const [open, setOpen] = useState(false);

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger render={<Button>Show details</Button>} />
      <Popover.Portal>
        <Popover.Positioner align="start">
          <Popover.Popup
            style={{
              boxSizing: 'border-box',
              width: 260,
              padding: 16,
              gap: 12,
            }}
          >
            <Popover.Title>Contact details</Popover.Title>
            <Popover.Description>
              Reach Alex at alex@example.com.
            </Popover.Description>
            <Popover.Close
              style={{ alignSelf: 'flex-end' }}
              render={<Button size="sm">Close</Button>}
            />
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
};
```

`onOpenChange` получает следующее логическое значение и сведения о событии, включая изменения, запрошенные триггером, элементами управления закрытием, клавишей Escape и взаимодействием вне элемента.

## Композиция с кнопками

Передайте `Button` Twenty UI через `render`, чтобы использовать её в качестве триггера или элемента управления закрытием. Всплывающее окно сохраняет своё открытое состояние, поведение клавиатуры и управление фокусом.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ImportHelp = () => (
  <Popover.Root>
    <Popover.Trigger render={<Button variant="outline">Import help</Button>} />
    <Popover.Portal>
      <Popover.Positioner align="start">
        <Popover.Popup
          style={{ boxSizing: 'border-box', width: 260, padding: 16, gap: 12 }}
        >
          <Popover.Arrow />
          <Popover.Title>Import a CSV file</Popover.Title>
          <Popover.Description>
            Use a header row to identify your columns.
          </Popover.Description>
          <Popover.Close
            style={{ alignSelf: 'flex-end' }}
            render={<Button size="sm">Got it</Button>}
          />
        </Popover.Popup>
      </Popover.Positioner>
    </Popover.Portal>
  </Popover.Root>
);
```

`render` добавляет поведение к переданной кнопке. Пользовательские компоненты-обёртки должны [перенаправлять переданные props и ref](https://docs.twenty.com/ru/ui/primitives/overview#custom-components), чтобы сохранить это поведение.

## Размещение и фокус

Для `Positioner` по умолчанию заданы `side="bottom"`, `align="center"` и `sideOffset={8}`. Он принимает полный установленный контракт Base UI, включая якоря элементов/ref/функций/виртуальные якоря, функциональные смещения, `positionMethod`, `collisionBoundary`, `collisionPadding`, `collisionAvoidance`, `arrowPadding`, `sticky` и `disableAnchorTracking`. DirectionProvider управляет логическим позиционированием и задает направление DOM. Явный `dir` может переопределить нативный атрибут; используйте провайдер, чтобы изменить логическое размещение стороны.

```tsx theme={null}
import { useRef } from 'react';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const AnchoredHelp = () => {
  const anchor = useRef<HTMLDivElement>(null);

  return (
    <div ref={anchor}>
      <Popover.Root>
        <Popover.Trigger>Help</Popover.Trigger>
        <Popover.Portal>
          <Popover.Positioner
            anchor={anchor}
            side="inline-end"
            align="start"
            sideOffset={({ anchor }) => anchor.width / 2}
            collisionBoundary="clipping-ancestors"
            collisionAvoidance={{ side: 'flip', align: 'shift' }}
            collisionPadding={8}
            positionMethod="fixed"
          >
            <Popover.Popup aria-label="Help">
              <Popover.Arrow />
              Contextual help
            </Popover.Popup>
          </Popover.Positioner>
        </Popover.Portal>
      </Popover.Root>
    </div>
  );
};
```

Escape закрывает всплывающее окно и возвращает фокус его триггеру. Взаимодействие за пределами всплывающего окна по умолчанию закрывает его. `Popup.initialFocus` и `Popup.finalFocus` принимают вышестоящие цели фокуса и обратные вызовы. `Root.modal` сохраняет немодальный режим Base UI по умолчанию, а также модальный режим и режим захвата фокуса для автономного использования.

## Места назначения портала и тема

Установите `container` и `keepMounted` для `Portal`:

| Контейнер | Разрешение |
| - | - |
| Не указано или `undefined` | Использует ближайший контейнер ThemeProvider с ограниченной областью действия. Без него Base UI использует родительский портал или body документа. |
| `null` | Ожидает изменения контейнера, не рендеря содержимое портала. Не выполняет резервный переход к теме или body. |
| Element, ShadowRoot или ref | Передает предоставленную цель в Base UI без изменений. Неразрешенный ref сохраняет резервный переход Base UI к родительскому порталу/body; если требуется ожидание, используйте явный null. |

Место назначения с ограниченной областью действия по умолчанию сохраняет свои CSS-токены и цветовую схему. Явное место назначения наследует CSS из своей фактической области DOM. Поместите его в нужную область действия темы или предоставьте там стили темы. Целям ShadowRoot нужны CSS библиотеки и стили темы в этом теневом дереве. Контекст темы React и заданное направление текста остаются доступными через порталы. Этот API не расширяет разрешенные для рендерера места назначения портала.

## Отсоединенные триггеры и payload

`Popover.createHandle\<TPayload>()` связывает отсоединенные триггеры с корневым элементом и предоставляет `open(triggerId)`, `close()` и `isOpen`. `Popover.Handle` — это установленный вышестоящий конструктор handle. Функция render корневого элемента получает активный payload. Вызывайте императивные действия из обработчиков событий или эффектов.

```tsx theme={null}
import { useState } from 'react';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const OwnerHelp = () => {
  const [handle] = useState(() => Popover.createHandle<{ name: string }>());

  return (
    <>
      <Popover.Trigger handle={handle} id="owner" payload={{ name: 'Alice' }}>
        Owner
      </Popover.Trigger>
      <Popover.Root handle={handle}>
        {({ payload }) => (
          <Popover.Portal>
            <Popover.Positioner align="start">
              <Popover.Popup aria-label="Account owner">
                {payload?.name}
                <Popover.Close>Close</Popover.Close>
              </Popover.Popup>
            </Popover.Positioner>
          </Popover.Portal>
        )}
      </Popover.Root>
    </>
  );
};
```

`onOpenChange` сохраняет `reason`, `event`, `trigger`, `cancel()` и `preventUnmountOnClose()`. Управляемые корневые элементы сохраняют `triggerId`; неуправляемые корневые элементы сохраняют `defaultTriggerId`. `actionsRef` предоставляет вышестоящие действия закрытия/размонтирования.

## Миграция

Перенесите `container` и `keepMounted` из Popup в Portal. Перенесите props размещения, якоря и коллизий в Positioner. Замените `Popup.arrow` явным дочерним элементом `Popover.Arrow`. Нативные props Popup, обработчики, props фокуса и ref по-прежнему нацелены на элемент содержимого. Dropdown.Content сохраняет свою существующую удобную сборку.

Внутри компонентов фронтенда используйте немодальную композицию в рамках существующей политики портала с ограниченной областью действия. Нативные всплывающие окна/диалоги браузера и модальность, напрямую управляемая приложением, запрещены; для диалогов используйте API диалогов хоста SDK. Работа над возможностями портала рендерера, геометрии, прокрутки и отклонения остается отдельной от этого примитивного API.

## Свойства

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

### Popover.Root

**Root.actionsRef** `RefObject\<PopoverRootActions | null\>`

A ref to imperative actions.

* `unmount`: Ends the closing phase of the popover after an externally controlled closing animation finishes.
  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the popover completes closing on its own.
  Whether it leaves the DOM is decided by `keepMounted` on the portal.
* `close`: Closes the popover imperatively when called.

**Root.children** `ReactNode | PayloadChildRenderFunction\<Payload\>`

Parts or a render function receiving the active trigger payload. Root renders no DOM element.

**Root.defaultOpen** `boolean` (default: false)

Whether the popover is initially open.

To render a controlled popover, use the `open` prop instead.

**Root.defaultTriggerId** `string | null`

ID of the trigger that the popover is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.

**Root.handle** `PopoverHandle\<Payload\>`

Connects detached triggers and imperative open/close actions.

**Root.modal** `boolean | "trap-focus"` (default: false)

Determines if the popover enters a modal state when open.

* `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
* `false`: user interaction with the rest of the document is allowed.
* `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
Tailwind's `sr-only` utility.

When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
screen readers can escape the popup.

**Root.onOpenChange** `((open: boolean, eventDetails: PopoverRootChangeEventDetails) =\> void)`

Receives the requested open state and Base UI event details, including reason, event, trigger, cancel() and preventUnmountOnClose().

**Root.onOpenChangeComplete** `((open: boolean) =\> void)`

Event handler called after any animations complete when the popover is opened or closed.

**Root.open** `boolean`

Whether the popover is currently open.

**Root.triggerId** `string | null`

ID of the trigger that the popover is associated with.
This is useful in conjunction with the `open` prop to create a controlled popover.
There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).

### Popover.Trigger

**Trigger.className** `string | ((state: PopoverTriggerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Trigger.closeDelay** `number` (default: 0)

How long to wait before closing the popover that was opened on hover.
Specified in milliseconds.

Requires the `openOnHover` prop.

**Trigger.delay** `number` (default: 300)

How long to wait before the popover may be opened on hover. Specified in milliseconds.

Requires the `openOnHover` prop.

**Trigger.handle** `PopoverHandle\<Payload\>`

A handle to associate the trigger with a popover.

**Trigger.id** `string`

ID of the trigger. In addition to being forwarded to the rendered element,
it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).

**Trigger.nativeButton** `boolean` (default: true)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (e.g. `<div>`).

**Trigger.openOnHover** `boolean` (default: false)

Whether the popover should also open when the trigger is hovered.

**Trigger.payload** `Payload`

A payload to pass to the popover when it is opened.

**Trigger.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverTriggerState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Trigger.style** `CSSProperties | ((state: PopoverTriggerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Portal

**Portal.className** `string | ((state: PopoverPortalState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Portal.container** `HTMLElement | ShadowRoot | RefObject\<HTMLElement | ShadowRoot | null\> | null`

When omitted, uses the scoped theme container, then the Base UI parent portal or document body. Explicit null delays rendering until a target is supplied. Explicit elements, ShadowRoots and refs are forwarded unchanged; their DOM scope supplies CSS tokens.

**Portal.keepMounted** `boolean` (default: false)

Whether to keep the portal mounted in the DOM while the popup is hidden.

**Portal.ref** `Ref\<HTMLDivElement\>`

Ref to the portal div. Native props, handlers and render target this element.

**Portal.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverPortalState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Portal.style** `CSSProperties | ((state: PopoverPortalState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Positioner

**Positioner.align** `"center" | "end" | "start"` (default: center)

How to align the popup relative to the specified side.

**Positioner.alignOffset** `number | OffsetFunction` (default: 0)

Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:

* `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
* `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
* `data.side`: which side of the anchor element the positioner is aligned against.
* `data.align`: how the positioner is aligned relative to the specified side.

**Positioner.anchor** `Element | VirtualElement | RefObject\<Element | null\> | (() =\> Element | VirtualElement | null) | null`

An element to position the popup against.
By default, the popup will be positioned against the trigger.

**Positioner.arrowPadding** `number` (default: 5)

Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup.

**Positioner.className** `string | ((state: PopoverPositionerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Positioner.collisionAvoidance** `CollisionAvoidance`

Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):

* `'flip'`: keep the requested side when it fits; otherwise try the opposite side
  (`top` and `bottom`, or `left` and `right`).
* `'shift'`: never change side; keep the requested side and move the popup within
  the clipping boundary so it stays visible.
* `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):

* `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
* `'shift'`: keep side and requested alignment, then nudge the popup along the
  alignment axis to fit.
* `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:

* `'start'`: allow perpendicular fallback and try the logical start side first
  (`top` before `bottom`, or `left` before `right` in LTR).
* `'end'`: allow perpendicular fallback and try the logical end side first
  (`bottom` before `top`, or `right` before `left` in LTR).
* `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`.

**Positioner.collisionBoundary** `Boundary` (default: clipping-ancestors)

An element or a rectangle that delimits the area that the popup is confined to.

**Positioner.collisionPadding** `Padding` (default: 5)

Additional space to maintain from the edge of the collision boundary.

**Positioner.disableAnchorTracking** `boolean` (default: false)

Whether to disable the popup from tracking any layout shift of its positioning anchor.

**Positioner.positionMethod** `"absolute" | "fixed"` (default: absolute)

Determines which CSS `position` property to use.

**Positioner.ref** `Ref\<HTMLDivElement\>`

Ref to the positioning div. Accepts the complete Base UI anchor, collision and positioning contract.

**Positioner.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverPositionerState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Positioner.side** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"` (default: bottom)

Which side of the anchor element to align the popup against.
May automatically change to avoid collisions.

**Positioner.sideOffset** `number | OffsetFunction` (default: 8)

Distance from the anchor. Defaults to 8. Accepts a number or positioning function.

**Positioner.sticky** `boolean` (default: false)

Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view.

**Positioner.style** `CSSProperties | ((state: PopoverPositionerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Popup

**Popup.children** `ReactNode`

Popup content. Compose Portal, Positioner and Arrow separately.

**Popup.className** `string | ((state: PopoverPopupState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Popup.finalFocus** `boolean | RefObject\<HTMLElement | null\> | ((closeType: InteractionType) =\> boolean | void | HTMLElement | null)`

Determines the element to focus when the popover is closed.

* `false`: Do not move focus.
* `true`: Move focus based on the default behavior (trigger or previously focused element).
* `RefObject`: Move focus to the ref element.
* `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.

**Popup.initialFocus** `boolean | RefObject\<HTMLElement | null\> | ((openType: InteractionType) =\> boolean | void | HTMLElement | null)`

Determines the element to focus when the popover is opened.
By default, focus moves to the first tabbable element inside the popup, except when the popover
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

* `false`: Do not move focus.
* `true`: Move focus based on the default behavior (first tabbable element or popup).
* `RefObject`: Move focus to the ref element.
* `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.

**Popup.ref** `Ref\<HTMLDivElement\>`

Ref to the popup div. Focus props, native attributes, handlers and render target this element.

**Popup.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverPopupState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Popup.style** `CSSProperties | ((state: PopoverPopupState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Arrow

**Arrow\.className** `string | ((state: PopoverArrowState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Arrow\.ref** `Ref\<HTMLDivElement\>`

Ref to the arrow div. Compose inside Popup.

**Arrow\.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverArrowState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Arrow\.style** `CSSProperties | ((state: PopoverArrowState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Backdrop

**Backdrop.className** `string | ((state: PopoverBackdropState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Backdrop.ref** `Ref\<HTMLDivElement\>`

Ref to the optional backdrop div. Compose inside Portal.

**Backdrop.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverBackdropState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Backdrop.style** `CSSProperties | ((state: PopoverBackdropState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Title

**Title.className** `string | ((state: PopoverTitleState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Title.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverTitleState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Title.style** `CSSProperties | ((state: PopoverTitleState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Description

**Description.className** `string | ((state: PopoverDescriptionState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Description.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverDescriptionState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Description.style** `CSSProperties | ((state: PopoverDescriptionState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Close

**Close.className** `string | ((state: PopoverCloseState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Close.nativeButton** `boolean` (default: true)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`).

**Close.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverCloseState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Close.style** `CSSProperties | ((state: PopoverCloseState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Popover.Viewport

**Viewport.children** `ReactNode`

The content to render inside the transition container.

**Viewport.className** `string | ((state: PopoverViewportState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Viewport.ref** `Ref\<HTMLDivElement\>`

Ref to the content-transition div for changing trigger payloads.

**Viewport.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, PopoverViewportState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Viewport.style** `CSSProperties | ((state: PopoverViewportState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.