A rich preview that opens when the pointer rests on a trigger — no click and no backdrop, so you can move into the panel. Closes on leave (after a short delay), outside pointer down, or Escape. Place the trigger in the [hover-card-trigger] slot and panel content as default children.
Hover the name to see a card. The panel is a CDK overlay, so it is not clipped by overflow-hidden parents.
Designed by
Same placements as popover. The panel flips when there is not enough room.
Run the following command to add this component to your project:
npx base-ui-cli add hover-card
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add hover-card
// Paths are relative to aliases.components (default: src/app/components)
import { HoverCardComponent } from './hover-card/hover-card.component';
@Component({
selector: 'app-your-component',
imports: [
HoverCardComponent
],
template: `...`
})
export class YourComponent {} API for hover-card — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-hover-card | class | string | '' | Extra host classes merged via `cn()`. |
base-hover-card | minWidth | unknown | '240px' | Minimum width of the overlay panel. |
base-hover-card | placement | PopoverPlacement | 'bottom-start' | Preferred placement relative to the trigger. Flips when there is not enough room. |
base-hover-card | openDelay | number | 200 | Milliseconds to wait after pointer enter / focus before opening. |
base-hover-card | closeDelay | number | 150 | Milliseconds to wait after pointer leave before closing (lets the pointer reach the panel). |
base-hover-card | (openChange) | boolean | — | Emits whenever the panel opens or closes. |
Content