Popover
An element that pops up from another element over other content; it differs from a tooltip in that it is usually triggered via click instead of hover and can contain interactive elements.
Examples
Theme
This component uses the following default theme:
- root{}(2 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
| Prop | Description | Default |
|---|---|---|
disablePadding | Disable default padding on popover.boolean | |
popoverStyle | Popover css styles.StyleHTMLAttributes<any> | |
popoverClassName | Popover classname.string | |
theme | Theme for the Popover.PopoverTheme | |
autoFocus | Popover has a focus trap that by default focuses the first element in the tab order.
With this option you can specify a different element to receive that initial focus, or use false for no initially focused element.FocusTargetOrFalse | (() => void) | |
children | Content to wrap.ReactNode | |
closeOnClick | Close on any click.boolean | |
closeOnBodyClick | Close when the body is clicked.boolean | true |
closeOnEscape | Close when escape key is triggered.boolean | true |
content | Content for the tooltip.any | |
reference | Reference of the tooltip to align to.any | |
placement | floating-ui placement.Placement | |
enterDelay | Delay before showing tooltip.number | |
leaveDelay | Delay before closing tooltip.number | 200 |
modifiers | floating-ui modifiers.Modifiers | |
visible | External setter for visibility.boolean | |
className | Additional CSS classnames.string | |
triggerClassName | CSS Classname for the tooltip container ( ie. the thing that the tooltip is bound to ).string | |
trigger | How the tooltip will be triggered.TriggerTypes | TriggerTypes[] | click |
disabled | Whether the tooltip is disabled.boolean | |
followCursor | Whether the tooltip should move with the cursor or not.boolean | |
pointerEvents | Add pointer events or not. Usually not for tooltips.string | |
isPopover | Differentiator for popovers to be handled separate from tooltipsboolean | |
onOpen | Tooltip was opened.() => void | |
onClose | Tooltip was closed.() => void |