Tooltip

Names a control that carries no text of its own, on hover or focus.

Configurations

Supported configurations for this component.

4 examples

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
labelreq	`string`	-	Text shown in the tooltip.
position	`'top'\|'bottom'\|'left'\|'right'`	'top'	Side of the trigger the label hangs off. `left`/`right` are for icon rails, where a label above the row would cover its neighbour.
portal	`boolean`	false	Render the bubble into <body> instead of the trigger, for triggers inside a clipping or scrolling panel.
childrenreq	`React.ReactNode`	-	The trigger element.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.