DEVELOPMENT PREVIEWIn development

Tooltip

Accessible tooltips: shown on hover and keyboard focus, dismissed with Escape, positioned in a portal with collision handling — never clipped by overflow containers.

Direction Examples

Size Examples

Delay Example

Rich content & titles

Snippet
import { Tooltip, TooltipDirection, TooltipSize } from '@creo-team/buzz-ui/client'

// Basic usage — hover and keyboard focus both show it
<Tooltip content="Simple tooltip">
	<Button>Hover me</Button>
</Tooltip>

// Positioning and size
<Tooltip content="Right side" placement="right" size="md">
	<Button>Right</Button>
</Tooltip>

// Optional bold title above the content
<Tooltip title="Heads up" content="Rich explanation lives here." size="md">
	<Button>With title</Button>
</Tooltip>

// Controlled
<Tooltip content="Always visible" open onOpenChange={setOpen}>
	<Button>Controlled</Button>
</Tooltip>

// Animations are CSS-driven — override the styling hooks if you want a
// different feel (no animation library involved):
// .bz-tooltip { animation: my-entrance 200ms ease; }

API

PropTypeDefaultDescription
content*
ReactNodeTooltip content (text or React elements)
title
stringOptional bold heading rendered above the content
direction
TooltipDirectionTooltipDirection.BottomPreferred side; flips automatically when there is no room
placement
'top' | 'right' | 'bottom' | 'left''bottom'Legacy alias for direction (still supported)
size
TooltipSize | 'sm' | 'md' | 'lg' | 'xl'TooltipSize.CompactSize preset (padding + max width)
delayMs
number400Hover delay before showing (focus shows immediately)
open
booleanControlled visibility
onOpenChange
(open: boolean) => voidVisibility change callback
widthClassName / contentClassName
stringExtra classes for the bubble

See the full API: /components/tooltip/api