> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/popover.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Popover

Show details or actions next to an element.

## Triggers


Click for detailsHover for details

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/popover/basic.tsx"
import { Button, Flex, Popover } from '@ifhover/leaf-ui';

export function PopoverBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Popover title="Project details" content="See project details and recent updates here.">
        <Button variant="outline">Click for details</Button>
      </Popover>
      <Popover
        title="Hint"
        trigger="hover"
        placement="right"
        content="Find more project information here."
      >
        <Button variant="outline">Hover for details</Button>
      </Popover>
    </Flex>
  );
}
```

Expand code

## Controlled editing


Click to edit

controlled.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/popover/controlled.tsx"
import { Button, Form, FormField, Input, Popover } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function PopoverControlled() {
  const [open, setOpen] = useState(false);
  return (
    <Popover
      title="Edit project"
      open={open}
      onOpenChange={setOpen}
      width={260}
      content={
        <Form
          layout="vertical"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="Project name">
            <Input defaultValue="Leaf Garden" />
          </FormField>
          <Button type="submit">Save and close</Button>
        </Form>
      }
    >
      <Button variant="outline">Click to edit</Button>
    </Popover>
  );
}
```

Expand code

## Panel placement


TopBottomLeftRight

placements.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/popover/placements.tsx"
import { Button, Flex, Popover } from '@ifhover/leaf-ui';

export function PopoverPlacements() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      {(['top', 'bottom', 'left', 'right'] as const).map((placement) => (
        <Popover
          key={placement}
          placement={placement}
          title="Project hint"
          content="The panel adjusts to available space."
        >
          <Button variant="outline">
            {{ top: 'Top', bottom: 'Bottom', left: 'Left', right: 'Right' }[placement]}
          </Button>
        </Popover>
      ))}
    </Flex>
  );
}
```

Expand code

## Popover API

| Property                  | Type                                                                                                                                                                 | Default               | Description                                 |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------- |
| `children`                | `ReactElement`                                                                                                                                                       | Required              | Trigger element, with ref and event support |
| `title / content`         | `ReactNode`                                                                                                                                                          | — / Required          | Title / content                             |
| `trigger`                 | `'click' \| 'hover'`                                                                                                                                                 | `'click'`             | Trigger mode                                |
| `placement`               | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'`               | Popup placement                             |
| `open / defaultOpen`      | `boolean`                                                                                                                                                            | `false`               | Controlled / initial open state             |
| `onOpenChange`            | `(open: boolean) => void`                                                                                                                                            | —                     | Open state change                           |
| `disabled`                | `boolean`                                                                                                                                                            | `false`               | Disable opening                             |
| `autoFocus`               | `boolean`                                                                                                                                                            | `true`                | Focus the first action on click opening     |
| `enterDelay / leaveDelay` | `number`                                                                                                                                                             | `100`                 | Hover enter / leave delay in ms             |
| `width / maxWidth`        | `number \| string`                                                                                                                                                   | `'max-content' / 320` | Width / maximum width                       |
| `className / style`       | `string / CSSProperties`                                                                                                                                             | —                     | Applied to the popup                        |

## Types

Import the exported types when defining props or building item lists.

```ts
import type { PopoverProps } from '@ifhover/leaf-ui';
```

## Usage notes

Use click mode for interactive content and hover mode for descriptions. Escape, outside click and focus leaving dismiss the popup. Tab keeps interactive content accessible. Supply aria-label when there is no title.