Tooltip Interactive
Interactive tooltip with clickable content, actions, and persistent mode.
Configuring your account...
Please wait while we prepare everything for you
Usage
import TooltipInteractive from './TooltipInteractive';
import { Button } from '@/components/ui/button';
<TooltipInteractive
title="Interactive Tooltip"
content="This tooltip contains interactive elements and actions."
actions={[
{
label: "Primary Action",
onClick: () => console.log("Primary clicked")
},
{
label: "Secondary",
onClick: () => console.log("Secondary clicked"),
variant: "secondary"
}
]}
persistent={true}
>
<Button>Click me</Button>
</TooltipInteractive>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Optional tooltip title |
| content | string | - | Tooltip content text |
| children | ReactNode | - | Element to trigger tooltip |
| position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
| delay | number | 200 | Delay before showing (ms) |
| className | string | - | Additional CSS classes |
| maxWidth | string | 'max-w-sm' | Maximum width class |
| actions | Array | [] | Action buttons array |
| onClose | function | - | Callback when tooltip closes |
| persistent | boolean | false | Keep open on click |
Features
- Interactive content
- Clickable action buttons
- Persistent mode option
- Click outside to close
- Close button in header
- Progress indicator
- Professional styling
- Responsive design