Hover Card

A customizable and accessible hover card component for displaying additional information on hover.

Introduction

The HoverCard component is a lightweight, accessible component for showing additional content when hovering over a trigger element, such as buttons or links.

Hover over this link

Installation

Install the HoverCard component using the following command:

npx axionjs-ui add hover-card

File Structure

Prop Types

Prop	Type	Default
`align`	`"center" \| "start" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`className`	`string`	-

Features

Customizable:
- Adjust the alignment, offset, and appearance to match your design.
Lightweight:
- Adds minimal overhead while offering a great user experience.
Easy to Use:
- Wrap your content with HoverCardTrigger and HoverCardContent.

Accessibility

The HoverCard component is fully accessible:

ARIA Roles:
- Properly handles aria-labelledby and aria-describedby.
Keyboard Navigation:
- Supports Tab and Shift+Tab for focus management.
Screen Reader Support:
- Screen readers announce the hover card content when triggered.

Conclusion

The HoverCard component is perfect for displaying contextual information when users hover over elements like buttons or links. It combines flexibility, accessibility, and ease of use.