A small informational popup appearing on hover, supporting beak placements (Top, Bottom, Left, Right, None) and On Color variants.
Loading demo: tooltip-real-world
npx sdaia-ui@latest add tooltip
import { Tooltip } from "@/components/ui/tooltip"<Tooltip />Tooltip with type={brand}.
Loading demo: tooltip-brand
Tooltip with neutral colors.
Loading demo: tooltip-neutral
Tooltip with beak positioned top.
Loading demo: tooltip-beak-top
Tooltip with beak positioned left.
Loading demo: tooltip-beak-left
Tooltip with type brand and beak positioned left.
Loading demo: tooltip-brand-beak-bottom
Props for the Tooltip component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'neutral' | 'brand' | 'neutral' | optional |
beakPlacement | 'none' | 'top' | 'bottom' | 'left' | 'right' | 'none' | optional |
beakAlignment | 'start' | 'centre' | 'end' | 'start' | optional |
title | ReactNode | - | optional |
description | ReactNode | - | optional |
icon | ReactNode | boolean | - | optional |
media | ReactNode | - | optional |
primaryAction | TooltipAction | - | optional |
secondaryAction | TooltipAction | - | optional |
link | TooltipLinkAction | - | optional |
counting | ReactNode | - | optional |