Tooltip

A context-aware popup that displays information when an element receives keyboard focus or a mouse hover.

Most lightweight tooltips suffer from a fatal flaw: they get clipped or hidden if they are placed inside a container with overflow-hidden. This TooltipBlock completely sidesteps that issue natively. It uses React's createPortal to render the tooltip bubble directly onto the document.body layer, calculating its position dynamically so it is mathematically impossible for it to get clipped by parent components.

Hover or tab to each trigger to open its tooltip.

Without Arrow

side: renders the tooltip on left, top, bottom, or right without an indicator arrow.
icon / title / des: renders a matching-height icon badge on the left, a single-line title, and single-line description.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

npx shadcn@latest add @algorize-ui/tooltip

components/custom/blocks/TooltipBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Nothing beyond the shared setup — Tooltip needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

With Arrow

UseshowArrowtrue: on TooltipContent to anchor a directional pointer arrow.

With Arrow & Animated

Useanimatedtrue: for a smooth pull-out emergence animation sliding gently out from the trigger.

With Staggered Content Animation

Usestaggeredtrue: along with animated for a sequential entrance where the icon appears first, followed by the title, and then the description.

With Expanding Content

Useexpandtrue: to open as a compact title badge first, then smoothly expand its height (for top/bottom) or width (for left/right) to unveil the description.

Props Reference

Component	Prop	Type	Default	Description
`Tooltip`	`delayDuration`	`number`	`200`	The time (in milliseconds) a user must hover over the trigger before the tooltip opens.
`TooltipContent`	`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	The preferred side of the trigger to render the tooltip content.
`TooltipContent`	`align`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the chosen side. For example, `side="top" align="end"` anchors the bottom-right corner of the tooltip to the top-right corner of the trigger.
`TooltipContent`	`sideOffset`	`number`	`6`	The distance (in pixels) from the edge of the trigger element to the tooltip bubble.
`TooltipContent`	`showArrow`	`boolean`	`false`	Whether to render an adaptive pointer arrow anchoring the tooltip bubble to its trigger.
`TooltipContent`	`animated`	`boolean`	`false`	Whether to enable the smooth pull-out animation that slides gently out from the trigger.
`TooltipContent`	`staggered`	`boolean`	`false`	Whether to animate child elements (icon → title → description) in a smooth staggered cascade.
`TooltipContent`	`expand`	`boolean`	`false`	Whether to start with only title space and smoothly expand height (for top/bottom) or width (for left/right) to unveil the description.
`TooltipContent`	`arrowClassName`	`string`	`undefined`	Optional Tailwind CSS classes for custom styling on the pointer arrow.
`TooltipContent`	`icon`	`React.ReactNode`	`undefined`	Optional leading icon rendered on the left inside a background badge container that matches the content height.
`TooltipContent`	`iconClassName`	`string`	`undefined`	Optional Tailwind CSS classes for custom styling on the icon background badge container.
`TooltipContent`	`title`	`React.ReactNode`	`undefined`	Optional header title rendered in bold to the right of the icon (single line). If omitted, no title is rendered.
`TooltipContent`	`description`	`React.ReactNode`	`undefined`	Optional descriptive text rendered underneath the title (single line). If only description is passed, it cleanly renders just the description.
`TooltipContent`	`des`	`React.ReactNode`	`undefined`	Shorthand alias for `description`.
`TooltipArrow`	`className`	`string`	`undefined`	Standalone arrow sub-component that automatically reads side and align to anchor the bubble.
All Components	`className`	`string`	`undefined`	Standard Tailwind overrides. Useful for overriding background colors or text sizing on the `TooltipContent`.