mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
136 lines
4.0 KiB
Plaintext
136 lines
4.0 KiB
Plaintext
---
|
|
title: Popover
|
|
description: An accessible popup anchored to a button.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/popover#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-popover-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/popover
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="popover" title="components/ui/popover.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Popover,
|
|
PopoverClose,
|
|
PopoverDescription,
|
|
PopoverPopup,
|
|
PopoverTitle,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover"
|
|
```
|
|
|
|
```tsx
|
|
<Popover>
|
|
<PopoverTrigger>Open Popover</PopoverTrigger>
|
|
<PopoverPopup>
|
|
<PopoverTitle>Popover Title</PopoverTitle>
|
|
<PopoverDescription>Popover Description</PopoverDescription>
|
|
<PopoverClose>Close</PopoverClose>
|
|
</PopoverPopup>
|
|
</Popover>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Popover
|
|
|
|
Root component. Alias for `Popover.Root` from Base UI.
|
|
|
|
### PopoverTrigger
|
|
|
|
Trigger button that opens the popover. Alias for `Popover.Trigger` from Base UI.
|
|
|
|
### PopoverPopup
|
|
|
|
Popup container that displays the popover content. Also exported as `PopoverContent`.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| -------------- | ---------------------------------------- | ---------- | ------------------------------------------------ |
|
|
| `tooltipStyle` | `boolean` | `false` | When true, applies tooltip-like styling (smaller padding, arrow) |
|
|
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Side of the trigger to position the popup |
|
|
| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment relative to the trigger |
|
|
| `sideOffset` | `number` | `4` | Distance from the trigger in pixels |
|
|
| `alignOffset` | `number` | `0` | Offset along the alignment axis |
|
|
| `portalProps` | `Popover.Portal.Props` | - | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Popover portal API |
|
|
|
|
### PopoverTitle
|
|
|
|
Title text for the popover. Styled wrapper for `Popover.Title` from Base UI.
|
|
|
|
### PopoverDescription
|
|
|
|
Description text for the popover. Styled wrapper for `Popover.Description` from Base UI.
|
|
|
|
### PopoverClose
|
|
|
|
Close button for the popover. Alias for `Popover.Close` from Base UI.
|
|
|
|
### PopoverCreateHandle
|
|
|
|
Creates a handle for detached popover triggers. Returns a handle object to attach to multiple triggers.
|
|
|
|
## Examples
|
|
|
|
### With Close Button
|
|
|
|
<ComponentPreview name="p-popover-2" />
|
|
|
|
### Tooltip Style
|
|
|
|
Use the `tooltipStyle` prop to make a popover look like a tooltip. This is recommended when you have an info icon button whose only purpose is to show additional information. See the [tooltip accessibility guidelines](https://base-ui.com/react/components/tooltip#accessibility-guidelines) for best practices.
|
|
|
|
<ComponentPreview name="p-input-group-7" />
|
|
|
|
### Animated Popovers
|
|
|
|
You can create animated popovers that smoothly transition between different triggers using detached triggers. This pattern allows multiple triggers to share a single popover popup, with automatic animations for position, size, and content changes.
|
|
|
|
To create detached triggers:
|
|
|
|
1. Create a handle using `PopoverCreateHandle`
|
|
2. Attach the same handle to multiple `PopoverTrigger` components
|
|
3. Each trigger provides a `payload` prop containing the content component
|
|
4. Use a single `Popover` component with the handle to render the popup
|
|
|
|
<ComponentPreview name="p-popover-3" />
|