DEVELOPMENT PREVIEWIn development

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

PropTypeDefaultDescription
content*
ReactNodeTooltip content (text or React elements)
direction
TooltipDirectionTooltipDirection.BottomDirection where tooltip appears (new API)
placement
'top' | 'right' | 'bottom' | 'left''bottom'Where the tooltip appears (legacy, still supported)
size
TooltipSize | 'sm' | 'md' | 'lg'TooltipSize.CompactSize of the tooltip
delayMs
number500Show delay in milliseconds
open
booleanControlled open state (optional)
animationVariants
TooltipAnimationVariantsCustom Framer Motion animation variants with TypeScript support

See the full API: /components/tooltip/api