Skip to content
TrademarkTrademark
Docs
Components

HoverCard

Updated: October 11, 2026
View on GitHub

The HoverCard component is a syntactic sugar for the Animation component with a handful of smart defaults to display additional information about an element when hovered or focused.

Tooltip, InfoTip or HoverCard
Tooltip is a short text label on hover or focus, usually set through a component's tooltip prop. InfoTip is an info icon that explains a label or setting in a sentence or two. HoverCard opens a card of rich content, such as a profile or a link preview, next to its trigger. 3.0 plans to consolidate them.

Keyboard

The card opens when its trigger takes keyboard focus (not the focus a click gives, since the pointer already opened it by hovering), and closes on Escape or when focus leaves both the trigger and the card. While it is open, Tab moves from the trigger into the card's links and buttons, and on past them to what follows the trigger; Escape from inside the card returns focus to the trigger. A card with something to act on marks its trigger aria-expanded and aria-controls; a card of text describes the trigger while open (aria-describedby), unless the trigger already has a description. The trigger itself must be focusable: a button, a link, or an element with tabIndex={0}.

API reference

Type
Default
…and every FlexProps propinherited—
…and every AnimationProps propinherited—
Edit this page on GitHub