Overview
AnnotationOverlay renders numbered hotspot markers at specific positions over an image or container. Each hotspot shows a popover with label and description on hover (desktop) or tap (mobile). Use it to highlight and explain parts of screenshots, diagrams, or product images.
Key Features
- Percentage-based positioning (0-100) for responsive layouts
- Numbered hotspots with hover/focus tooltips
- Touch-friendly with tap-to-toggle on mobile
- Disabled mode for non-interactive display
- Keyboard accessible with focus states
Examples
Interactive Demo
Hover over the numbered hotspots to see annotation details. Toggle disabled mode to see non-interactive state.
Hover over the numbered hotspots to see annotation details. On touch devices, tap to toggle.
Module Exports
The annotation-overlay module exports both the component and the Annotation type for defining hotspot data.
| Prop | Type | Description |
|---|---|---|
AnnotationOverlay | Component | Main component that renders hotspots over a positioned container |
Annotation | Interface | Type definition for individual annotation data (id, x, y, label, description) |
Props Reference
AnnotationOverlay Props
| Prop | Type | Default | Description |
|---|---|---|---|
annotations | Annotation[] | required | Array of annotation objects defining hotspot positions and content |
disabled | boolean | false | When true, hotspots are visible but non-interactive |
Annotation Interface
| Prop | Type | Description |
|---|---|---|
id | string | Unique identifier for the annotation |
x | number | X position as percentage (0-100) from left edge |
y | number | Y position as percentage (0-100) from top edge |
label | string | Short title shown in the tooltip (required) |
description | string | Longer description shown below the label (optional) |
Usage
import { AnnotationOverlay } from '@/ui/components/annotation-overlay';
import type { Annotation } from '@/ui/components/annotation-overlay';
const annotations: Annotation[] = [
{
id: '1',
x: 25, // X position as percentage (0-100)
y: 30, // Y position as percentage (0-100)
label: 'Navigation Menu',
description: 'Main navigation with quick links',
},
{
id: '2',
x: 75,
y: 25,
label: 'User Profile',
},
];
// Basic usage - position relative container required
<div className="relative">
<img src="/screenshot.png" alt="App screenshot" />
<AnnotationOverlay annotations={annotations} />
</div>
// Disabled state (non-interactive)
<AnnotationOverlay annotations={annotations} disabled />