The Hover Card component is a user-friendly, interactive tool designed to display information when a user hovers over a specific trigger element. It offers a variety of features, such as controlled state, customizable positioning, and the use of render props for a more dynamic and flexible experience.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
number
The duration from when the mouse leaves the trigger or content until the hover card closes.
'ltr' | 'rtl'
The document's text/writing direction.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ trigger: string content: string positioner: string arrow: string }>
The ids of the elements in the popover. Useful for composition.
(details: OpenChangeDetails) => void
Function called when the hover card opens or closes.
boolean
Whether the hover card is open
number
The duration from when the mouse enters the trigger until the hover card opens.
PositioningOptions
The user provided options used to position the popover content
Dict<any>
Dict<any>
() => void
Function to close the hover card
Dict<any>
boolean
Whether the hover card is open
() => void
Function to open the hover card
Dict<any>
(options?: Partial<PositioningOptions> | undefined) => void
Function to reposition the popover
Dict<any>
boolean
Whether to enable lazy mounting. Defaults to `false`.
() => void
boolean
boolean
Whether to unmount on exit. Defaults to `false`.