Popover
Basic usage
First, import the component.
import {Popover} from '@pleo-io/telescope'
Then use it, like so:
API reference
Popover
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | - |
open | boolean | - |
onOpenChange | (boolean) => void | - |
Trigger
The Trigger is the element that toggles the popover.
The Trigger must be an element with a role that supports the
aria-expanded attribute.
If it doesn't support this attribute, wrap it in a
Naked Button.
The Trigger must also feature an accessible name. If it doesn't have one (e.g. when using an Icon), provide one by using a Visually Hidden label.
By default the Content will position itself against the trigger.
Anchor
The Anchor is an optional element, which can be used to position the popover against another element.
Content
The component that pops out when the popover is open.
| Prop | Type | Default |
|---|---|---|
matchWidth | boolean | false |
side | "top" | "bottom" | "left" | "right" | "bottom" |
align | "start" | "center" | "end" | "center" |
portalled | boolean | true |
Arrow
An optional arrow which points from the Content component to the Trigger component.
ControlsContainer
A styled container that is used to contain the Close and ActionButton components.
Close
A button that closes the popover.
ActionButton
A styled button usually placed inside the ControlsContainer.