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

PropTypeDefaultDescription
titlestring-Optional tooltip title
contentstring-Tooltip content text
childrenReactNode-Element to trigger tooltip
position'top' | 'bottom' | 'left' | 'right''top'Tooltip position
delaynumber200Delay before showing (ms)
classNamestring-Additional CSS classes
maxWidthstring'max-w-sm'Maximum width class
actionsArray[]Action buttons array
onClosefunction-Callback when tooltip closes
persistentbooleanfalseKeep 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