Tooltip
Elegant tooltips with smooth animations. Supports positioning, delays, and custom styling.
Direction Examples
Size Examples
Delay Example
Custom Animations
Snippet
import {
Tooltip,
TooltipDirection,
TooltipSize,
AnimationPresets,
type TooltipAnimationVariants
} from '@creo-team/buzz-ui/client'
// Basic usage - uses elegant default animations
<Tooltip content="Simple tooltip">
<Button>Hover me</Button>
</Tooltip>
// Using animation presets
<Tooltip
content="Bouncy tooltip"
animationVariants={AnimationPresets.tooltip.bouncy}
>
<Button>Bouncy</Button>
</Tooltip>
// Custom animation with proper TypeScript types
const customAnimation: TooltipAnimationVariants = {
initial: { opacity: 0, y: 10, scale: 0.8 },
animate: { opacity: 1, y: 0, scale: 1 },
exit: { opacity: 0, y: -10, scale: 0.8 },
transition: { type: "spring", bounce: 0.4, duration: 0.6 }
}
<Tooltip
content="Custom animation"
animationVariants={customAnimation}
>
<Button>Custom</Button>
</Tooltip>
API
Prop | Type | Default | Description |
---|---|---|---|
content * | ReactNode | — | Tooltip content (text or React elements) |
direction | TooltipDirection | TooltipDirection.Bottom | Direction where tooltip appears (new API) |
placement | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Where the tooltip appears (legacy, still supported) |
size | TooltipSize | 'sm' | 'md' | 'lg' | TooltipSize.Compact | Size of the tooltip |
delayMs | number | 500 | Show delay in milliseconds |
open | boolean | — | Controlled open state (optional) |
animationVariants | TooltipAnimationVariants | — | Custom Framer Motion animation variants with TypeScript support |
See the full API: /components/tooltip/api