Tooltip
A small informational popup appearing on hover, supporting beak placements (Top, Bottom, Left, Right, None) and On Color variants.
Loading preview…
1
<Tooltip2
beakPlacement="top"3
beakAlignment="start"4
title="Welcome to SDAIA Platform"5
description="This is your central hub for monitoring APIs, managing users, and reviewing analytics."Installation
npx sdaia-ui@latest add tooltip
Usage
import { Tooltip } from "@/components/ui/tooltip"<Tooltip />Examples
Brand
Tooltip with type={brand}.
Loading preview…
1
<Tooltip2
type="brand"3
icon4
title="Tooltip title"5
description="..."Neutral
Tooltip with neutral colors.
Loading preview…
1
<Tooltip2
type="neutral"3
icon4
title="Tooltip title"5
description="Max width of tooltips is 240px - text will wrap automatically"Beak Top
Tooltip with beak positioned top.
Loading preview…
1
<Tooltip2
type="neutral"3
beakPlacement="top"4
beakAlignment="start"5
iconBeak Left
Tooltip with beak positioned left.
Loading preview…
1
<Tooltip2
type="neutral"3
beakPlacement="left"4
beakAlignment="start"5
iconTooltip with type brand and beak positioned left.
Loading preview…
1
<Tooltip2
type="brand"3
beakPlacement="bottom"4
beakAlignment="centre"5
iconAPI Reference
TooltipProps
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 |
