Introduction

The HoverCard component is an interactive overlay that displays supplementary details, preview cards, or profile previews when a user hovers over a trigger element. It serves as a visual bridge for sharing contextual details without interrupting the user's focus on the main workspace.

The HoverCard is fully integrated as a hoverCard block in the Page Builder, allowing content authors and developers to easily configure hover delays and detailed metadata titles directly within the CMS.

Usage

These examples illustrate how content editors bind and structure overlay components.

1. Supplementary Information Hover Card

A classic hover card configuration showing additional, helpful contextual descriptions.

{
  "type": "hoverCard",
  "triggerText": "Supplementary Information",
  "title": "Profile Summary",
  "description": "Active contributor since 2024. Focused on developer relations and technical documentation workflows."
}

2. Fast-Trigger Overlay

Decreases the open and close delays for immediate responsiveness when a user moves their pointer over the trigger.

{
  "type": "hoverCard",
  "triggerText": "Fast Hover",
  "title": "Immediate Detail View",
  "description": "This overlay displays quickly due to customized opening delay milliseconds parameters.",
  "openDelay": 200,
  "closeDelay": 100
}

3. Right-Side Placement

Opens to the right of the trigger instead of the default bottom — useful for triggers that sit inline with text or near the bottom of the viewport.

{
  "type": "hoverCard",
  "triggerText": "Right-Side Placement",
  "title": "Inline Reference",
  "description": "Opens to the right so it doesn't cover the line of text below the trigger.",
  "placement": "right"
}

Props

Developer Notes & Accessibility

• Responsive Viewport Clamping: The interactive island absolute-positions the popped card relative to its relative-positioned trigger wrapper, using the same positioning system as Popover. If the requested placement would overflow the viewport, it automatically flips to the opposite side, and clamps onto the cross axis to prevent layout overflow — no manual alignment prop needed even for triggers pinned near a viewport edge (e.g. a header's trailing avatar).
• Always-On Arrow: Every hover card renders a small pointer arrow back to its trigger — there's no toggle to hide it. The arrow tracks the trigger's actual measured center regardless of placement or trigger width, staying visually locked to the trigger even when viewport clamping shifts the card off its default position.
• WAI-ARIA Pattern: Adheres to semantic aria layouts, using appropriate relative role associations. It ensures screen readers are updated correctly when absolute elements display or collapse.
• Scroll Synchronization: Because the container uses absolute coordinate alignments nested directly under the trigger container context, scrolling or resizing the page keeps the popped card securely synchronized with the trigger.