/

All things Hovercard

Components

HovercardShow a Popover with additional information when users hover over an element.

Examples

Hovercard with keyboard supportUsing the HovercardDisclosure component to render a Hovercard that can be opened with the keyboard.

API Reference

useHovercardContextReturns the hovercard store from the nearest hovercard container.

useHovercardStoreCreates a hovercard store.

HovercardRenders a hovercard element, which is a popover that's usually made visible by hovering the mouse cursor over a HovercardAnchor.

HovercardAnchorRenders an anchor element that will open a Hovercard popup on hover.

HovercardArrowRenders an arrow element in a hovercard.

HovercardDescriptionRenders a description in a hovercard. This component must be wrapped within Hovercard so the aria-describedby prop is properly set on the hovercard element.

HovercardDisclosureRenders a hidden disclosure button that will be visible when the HovercardAnchor receives keyboard focus. The user can then navigate to the button to open the hovercard when using the keyboard.

HovercardDismissRenders a button that hides a hovercard.

HovercardHeadingRenders a heading in a hovercard. This component must be wrapped within Hovercard so the aria-labelledby prop is properly set on the hovercard element.

HovercardProviderProvides a hovercard store to Hovercard components.