UI kit reference

components/Tooltip

import { … } from 'zidane-ui'ui/src/components/Tooltip.tsx

Popover (click)

HoverCard (hover)

Hover me

RowActionsMenu (3-dots)

Tooltip, inline and portaled

Components#

`Tooltip`Component#

Renders a small label that fades in under or above its trigger on hover or keyboard focus. The first one waits about 400 ms so a passing cursor never flashes it, a following one within 600 ms opens at once, and focus opens it immediately. Pressing the trigger or Esc hides it until the pointer and focus leave. The bubble describes the trigger through aria-describedby and is not interactive.

TypeScript

function Tooltip(props: TooltipProps): Element

Parameters

Parameters
Name	Type	Description
props	`TooltipProps`	Component props.

Returns

Element

Props

Tooltip props
Name	Type	Description
align?	`'end' \| 'center'`	Horizontal anchor. `end` right-aligns the bubble with the trigger's right edge.
children	`ReactNode`	The trigger. Hovering it, or keyboard focus on it, shows the tooltip.
className?	`string`	Extra classes on the wrapping element.
disabled?	`boolean`	Never opens, while the trigger's own surface is open (a popover over the same spot).
label	`ReactNode`	The tooltip content. Keep it short.
maxWidth?	`number`	Wrap long labels at this width (px) instead of one line.
portal?	`boolean`	Render the bubble into `document.body` with fixed positioning instead of inside the host. Needed when the host sits in an `overflow` container (a scrolling list) that would otherwise clip the bubble. Position is measured when it opens; the same enter motion applies.
side?	`'bottom' \| 'top'`	Where the bubble sits relative to the trigger.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Tooltip.tsx:91

Interfaces#

`TooltipProps`Interface#

Props for Tooltip.

TypeScript

interface TooltipProps

Properties

TooltipProps properties
Name	Type	Description
align?	`'end' \| 'center'`	Horizontal anchor. `end` right-aligns the bubble with the trigger's right edge.
children	`ReactNode`	The trigger. Hovering it, or keyboard focus on it, shows the tooltip.
className?	`string`	Extra classes on the wrapping element.
disabled?	`boolean`	Never opens, while the trigger's own surface is open (a popover over the same spot).
label	`ReactNode`	The tooltip content. Keep it short.
maxWidth?	`number`	Wrap long labels at this width (px) instead of one line.
portal?	`boolean`	Render the bubble into `document.body` with fixed positioning instead of inside the host. Needed when the host sits in an `overflow` container (a scrolling list) that would otherwise clip the bubble. Position is measured when it opens; the same enter motion applies.
side?	`'bottom' \| 'top'`	Where the bubble sits relative to the trigger.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Tooltip.tsx:29