Popover

A popup that displays information related to an element when the element receives keyboard focus, the mouse hovers over it, or it is clicked.

Component Features

• 🛠️ Multi-direction: Supports 12 directions including top, bottom, left, right and their start/end variations.
• 🖱️ Multiple Triggers: Supports various trigger methods such as click, hover, and focus.
• 🎨 Theme Customization: Supports global theme customization based on BrConfigProvider, and local style overrides via TailwindCSS.

Basic Usage

The most basic popover display triggered by a click.

Example

Position

Supports placement property to control the pop-up position, supporting 12 different directions.

Example

Custom Trigger Methods

Supports click, hover, and focus trigger methods, which can be configured via the trigger prop.

Hover over me

Example

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component. Styles can also be overridden locally via TailwindCSS.

Example

Loading & Empty States

Supports displaying loading and empty states in the popover content.

Example

API Reference

BrPopover

Prop	Type	Default	Description
open (v-model)	boolean	-	The controlled open state of the popover.
defaultOpen	boolean	false	The default open state when initially rendered.
trigger	'click' | 'hover' | 'focus' | 'manual'	'click'	How the popover is triggered.
disabled	boolean	false	Disable the popover trigger.
openDelay	number	200	Delay in ms before opening (for hover trigger).
closeDelay	number	300	Delay in ms before closing (for hover trigger).

BrPopoverContent

Prop	Type	Default	Description
placement	'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'	'bottom'	Placement of the popover relative to the trigger.
sideOffset	number	4	Distance between the popover and the trigger.
mask	boolean	false	Whether to show a mask behind the popover.
loading	boolean	false	Whether to show a loading state.
empty	boolean	false	Whether the content is empty.
closeStrategy	Array<'click-outside' | 'escape' | 'scroll'>	['click-outside', 'escape']	Strategy for closing the popover.

BrPopoverTrigger

Used to wrap the trigger element. Use as-child to pass the event to the child element.

BrPopoverArrow

Used to display the arrow pointing to the trigger. Can be customized with class (e.g. fill-popover).

BrPopoverClose

Used to wrap the close button. Use as-child to pass the event to the child element.