Tooltip Rich
Rich tooltip with icons, images, titles, and enhanced content display.
Configuring your account...
Please wait while we prepare everything for you
Usage
import TooltipRich from './TooltipRich';
import { Button } from '@/components/ui/button';
import { Info } from 'lucide-react';
<TooltipRich
title="Information"
content="This is a rich tooltip with additional styling and content options."
icon={<Info className="w-5 h-5" />}
position="top"
maxWidth="max-w-xs"
>
<Button>Hover me</Button>
</TooltipRich>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Optional tooltip title |
| content | string | - | Tooltip content text |
| icon | ReactNode | - | Optional icon element |
| image | string | - | Optional header image URL |
| children | ReactNode | - | Element to trigger tooltip |
| position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
| delay | number | 400 | Delay before showing (ms) |
| className | string | - | Additional CSS classes |
| maxWidth | string | 'max-w-xs' | Maximum width class |
| showArrow | boolean | true | Show/hide arrow |
Features
- Rich content with titles and icons
- Optional header images
- Enhanced typography
- Gradient accent borders
- Customizable width
- Optional arrows
- Professional styling
- Dark mode support