Tooltip

stable

Short contextual label shown on hover or keyboard focus.

since v1.31.8 kB gzip

Preview

Code

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add tooltip

Usage

React

Import only

import { Tooltip, TooltipTrigger, Button } from "@/components/strata";

<TooltipTrigger>
  <Button aria-label="Copy">…</Button>
  <Tooltip>Copy to clipboard</Tooltip>
</TooltipTrigger>

Props

Prop	Type	Default
`placement` Preferred side.	"top" \| "bottom" \| "start" \| "end"	"top"
`delay` Open delay in ms.	number	600
`variant` Dark or light surface.	"default" \| "light"	"default"

Accessibility

Dialog

Modal window for focused tasks and confirmations.

Was this page helpful?

Documented since v1.3 · components/tooltip.mdx