Tooltip
Contextual information that appears when an element receives focus, providing helpful hints without cluttering the interface.
Import
import { Tooltip } from '@smart-tv/ui';
Basic Usage
import { Tooltip, Button } from '@smart-tv/ui';
function App() {
return (
<Tooltip content="Click to play the video">
<Button focusKey="play-button">
Play
</Button>
</Tooltip>
);
}
Tooltip Placement
Control where the tooltip appears relative to the target element.
// Top placement (default)
<Tooltip content="Tooltip above" placement="top">
<Button focusKey="btn-1">Hover Me</Button>
</Tooltip>
// Bottom placement
<Tooltip content="Tooltip below" placement="bottom">
<Button focusKey="btn-2">Hover Me</Button>
</Tooltip>
// Left placement
<Tooltip content="Tooltip on left" placement="left">
<Button focusKey="btn-3">Hover Me</Button>
</Tooltip>
// Right placement
<Tooltip content="Tooltip on right" placement="right">
<Button focusKey="btn-4">Hover Me</Button>
</Tooltip>
Show/Hide Delay
Add delays before showing or hiding the tooltip.
// Delay before showing (500ms)
<Tooltip
content="Appears after delay"
delay={500}
>
<Button focusKey="delayed">Delayed Tooltip</Button>
</Tooltip>
// No delay
<Tooltip
content="Appears immediately"
delay={0}
>
<Button focusKey="instant">Instant Tooltip</Button>
</Tooltip>
// Long delay (1 second)
<Tooltip
content="Takes a moment to appear"
delay={1000}
>
<Button focusKey="slow">Slow Tooltip</Button>
</Tooltip>
Rich Content
Use JSX elements for complex tooltip content.
<Tooltip
content={
<div className="space-y-2">
<h3 className="font-semibold">Premium Feature</h3>
<p className="text-sm">Subscribe to unlock HD quality</p>
<div className="flex gap-2 mt-2">
<span className="text-xs bg-blue-500 px-2 py-1 rounded">$9.99/mo</span>
</div>
</div>
}
placement="top"
>
<Button focusKey="premium">
<LockIcon /> HD Quality
</Button>
</Tooltip>
Controlled Visibility
Manually control when the tooltip is visible.
import { useState } from 'react';
function ControlledTooltip() {
const [visible, setVisible] = useState(false);
return (
<Tooltip
content="Controlled tooltip"
visible={visible}
onVisibleChange={setVisible}
>
<Button
focusKey="controlled"
onFocus={() => setVisible(true)}
onBlur={() => setVisible(false)}
>
Controlled
</Button>
</Tooltip>
);
}
With/Without Arrow
// With arrow (default)
<Tooltip content="Has a pointer" arrow={true}>
<Button focusKey="with-arrow">With Arrow</Button>
</Tooltip>
// Without arrow
<Tooltip content="Clean edges" arrow={false}>
<Button focusKey="no-arrow">No Arrow</Button>
</Tooltip>
Custom Styling
// Dark theme tooltip
<Tooltip
content="Dark tooltip"
className="bg-gray-900 text-white px-4 py-2 rounded-lg shadow-xl"
>
<Button focusKey="dark">Dark Theme</Button>
</Tooltip>
// Light theme tooltip
<Tooltip
content="Light tooltip"
className="bg-white text-gray-900 px-4 py-2 rounded-lg shadow-lg border"
>
<Button focusKey="light">Light Theme</Button>
</Tooltip>
// Colored tooltip
<Tooltip
content="Important action"
className="bg-red-500 text-white px-4 py-2 rounded-lg"
>
<Button focusKey="warning">Delete</Button>
</Tooltip>
Focus Behavior
Tooltip automatically shows when the wrapped element receives focus and hides when it loses focus.
import { Row, Card, Tooltip } from '@smart-tv/ui';
function VideoRow() {
return (
<Row focusKey="video-row">
<Tooltip content="Action Movie • 2h 15m • 2023">
<Card focusKey="movie-1">
<img src="/movie1.jpg" alt="Movie 1" />
</Card>
</Tooltip>
<Tooltip content="Comedy Series • S1 E1 • 45m">
<Card focusKey="movie-2">
<img src="/movie2.jpg" alt="Movie 2" />
</Card>
</Tooltip>
<Tooltip content="Documentary • 1h 30m • 4K">
<Card focusKey="movie-3">
<img src="/movie3.jpg" alt="Movie 3" />
</Card>
</Tooltip>
</Row>
);
}
Multi-line Content
<Tooltip
content={
<>
<div>Title: The Great Adventure</div>
<div>Duration: 2h 15m</div>
<div>Rating: PG-13</div>
<div>Year: 2023</div>
</>
}
className="max-w-xs"
placement="top"
>
<Card focusKey="movie-card">
<img src="/movie.jpg" alt="Movie" />
</Card>
</Tooltip>
Props
Prop | Type | Default | Description |
---|---|---|---|
content | string | ReactNode | required | Tooltip content |
children | ReactElement | required | Target element |
placement | top | bottom | left | right | top | Tooltip position |
delay | number | 200 | Show delay (ms) |
visible | boolean | - | Controlled visibility |
onVisibleChange | (visible: boolean) => void | - | Visibility change handler |
arrow | boolean | true | Show arrow pointer |
className | string | - | CSS classes |
Best Practices
- Keep tooltip content concise and informative
- Use tooltips for supplementary information, not critical content
- Set appropriate delay based on context (shorter for frequently used items)
- Ensure tooltips don't obscure other important UI elements
- Use consistent styling across all tooltips in your app
- Consider screen edges when positioning tooltips
- For TV apps, ensure tooltips are readable at 10-foot viewing distance