HoverCard Component

The HoverCard component creates elegant floating cards that appear when users hover over trigger elements. Perfect for displaying rich previews, detailed tooltips, or additional context without cluttering your interface.

Key Features

• Smart Positioning: Automatically adjusts to stay within viewport

• Multiple Triggers: Support for multiple trigger elements

• Customizable Offset: Fine-tune card positioning

• Accessibility: Built-in ARIA support and keyboard navigation

Live Demo

Implementation

Basic Usage

Create a simple hover card with a trigger element:

1
<button class="trigger-button">Hover over me</button>
2
  <HoverCard
3
    role="tooltip"
4
    triggerQuery=".trigger-button"
5
    position="bottom"
6
    offset={8}
7
  >
8
    <div class="p-4">
9
      <h3>Preview Title</h3>
10
      <p>Rich preview content goes here</p>
11
    </div>
12
</HoverCard>

Position Variants

The HoverCard supports four positioning options:

HoverCard Component Props API

Best Practices

1. Content Guidelines

   • Keep content concise and relevant
   • Use clear headings when needed
   • Maintain consistent styling
   • Consider mobile viewports

2. Trigger Selection

   • Use descriptive trigger elements
   • Ensure adequate touch targets
   • Consider multiple triggers
   • Maintain logical grouping

Common Use Cases