Tooltip

Overlays · Button, Combobox, Icon, Popover, Tooltip

Tooltip names an icon-only control on hover or focus; Popover holds a small interactive panel anchored to a trigger.

Tooltip props: label, shortcut, side ("top" | "bottom" | "left" | "right"), one child element.
Popover props: trigger (element, or ({open, toggle}) => element), open/onOpenChange (optional control), align ("start" | "end"), side ("top"), width, flush (no padding, for Menus), block, children or ({close}) => children.

Tooltips only add a name or a shortcut. Anything you must read or click goes in a Popover.
Tooltips appear after 350 ms on hover, immediately on keyboard focus, and close on Esc.
Popovers close on outside click and Esc. Use a Modal when the task needs more than a few fields.

PreviewCode

Props

Button

Prop	Type	Notes
`variant?`	`"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"`
`size?`	`"md" \| "sm"`
`icon?`	`IconName`
`iconRight?`	`IconName`
`disabled?`	`boolean`
`type?`	`"button" \| "submit"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Combobox

Prop	Type	Notes
`label?`	`string`
`options`	`(string \| Option)[]`	Required
`value?`	`string \| string[] \| null`
`defaultValue?`	`string \| string[]`
`onChange?`	`(v: string \| string[] \| null) => void`
`multiple?`	`boolean`
`creatable?`	`boolean`
`placeholder?`	`string`
`hint?`	`string`
`error?`	`string`
`required?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Icon

Prop	Type	Notes
`name`	`IconName`	Required
`size?`	`number`
`label?`	`string`
`className?`	`string`
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`trigger`	`ReactNode \| ((s: { open: boolean; toggle: () => void }) => ReactNode)`	Required
`open?`	`boolean`
`onOpenChange?`	`(o: boolean) => void`
`align?`	`"start" \| "end"`
`side?`	`"top" \| "bottom"`
`width?`	`number`
`flush?`	`boolean`
`block?`	`boolean`
`role?`	`string`
`children?`	`ReactNode \| ((s: { close: () => void }) => ReactNode)`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`label`	`ReactNode`	Required
`shortcut?`	`string`
`side?`	`"top" \| "bottom" \| "left" \| "right"`
`children`	`ReactNode`	Required
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.