Hover Card

An enterprise-level hover card component based on BrConfigProvider for global theme configuration. It supports adaptive positioning, lazy rendering, and keyboard navigation, and can be seamlessly integrated with components like BrTable and BrList.

Component Features

• 🎯 Adaptive Positioning: Intelligent space calculation, supports auto-avoidance and multi-direction (top/bottom/left/right) popups.
• ⚡ Seamless Integration: Perfectly integrates with components like BrTable, BrList, and BrAvatar to handle complex interactions.
• 🎨 Theme Customization: Supports global customization based on BrConfigProvider and local style overrides via TailwindCSS.
• ⌨️ Accessibility: Built-in keyboard navigation (Tab switching, ESC to close) and delay control to avoid accidental touches.
• 📦 Multi-instance Management: Comes with HoverCardManager to provide automatic z-index incrementation for global layering.

Basic Usage

The most basic hover card, displayed when the mouse hovers over the trigger element.

Example

Integration with Avatar

Commonly used for displaying user information, hovering over the avatar to show detailed user profiles.

VU

Example

Integration with Table

Display more extended information or operation forms when hovering over a table row.

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00

Example

Theme Customization

Supports using BrConfigProvider for global configuration of the HoverCard, or using TailwindCSS for local style isolation and customization.

Example

API Reference

BrHoverCard

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the hover card when it is initially rendered.
open	boolean	false	The controlled open state of the hover card.
openDelay	number	700	The duration from when the mouse enters the trigger until the hover card opens.
closeDelay	number	300	The duration from when the mouse leaves the trigger or content until the hover card closes.
@update:open	(value: boolean) => void	-	Event handler called when the open state of the hover card changes.

BrHoverCardTrigger

A wrapper that contains the trigger element. By default, it uses asChild.

BrHoverCardContent

Prop	Type	Default	Description
placement	'top' | 'bottom' | 'left' | 'right' | 'top-start' etc. (12 types)	'bottom'	The preferred placement of the hover card relative to the trigger.
sideOffset	number	4	The distance in pixels from the trigger.
loading	boolean	false	Whether to show the loading placeholder.
empty	boolean	false	Whether to show the empty data placeholder.
zIndex	number	Auto increment	The z-index layer of the card, automatically managed by HoverCardManager by default.
isolated	boolean	false	Whether to enable style isolation classes to avoid global style pollution.

HoverCardManager

A static management class used to manage the global state and layering of hover cards.

Method	Return Type	Description
nextZIndex()	number	Gets the next auto-incremented z-index, used for handling multi-instance nested layers.