Interaction

Tooltip

A compact hover/focus label for icon buttons and dense UI.

Component

import { Tooltip } from "@swirski/ui";

3 controls

Controls

label

content

tone

<Tooltip content="Helpful context">
  <Button tone="blue">
    Hover me
  </Button>
</Tooltip>

6 generated

Prop	Type	Default	Notes
`asChild`	`boolean`	`false`	Generated from TooltipProps.
`children`Required	`ReactNode`	`-`	Element that owns the tooltip.
`content`Required	`string \| (React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> & string) \| (Iterable<ReactNode> & string) \| (React.ReactPortal & string) \| (Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<ReactNode> \| null> & string)`	`-`	Tooltip label content.
`size`	`'sm' \| 'md'`	`"md"`	Generated from TooltipProps.
`tone`	`'yellow' \| 'black'`	`"black"`	Generated from TooltipProps.
`variant`	`'default'`	`"default"`	Generated from TooltipProps.
`className`	`string`	`-`	Adds classes to the tooltip wrapper.