Component
⬦

Tooltip

Contextual hint overlay with flexible placement, show/hide delays, and keyboard + screen reader support.

Import

import { Tooltip } from '@stareezy-ui/components'

Basic usage

Live Preview

Hover or focus the button to see the tooltip
<Tooltip content="Save your changes">
  <Button>Save</Button>
</Tooltip>

Placement

<Tooltip content="Above" placement="top">
  <Button>Top</Button>
</Tooltip>

<Tooltip content="Below" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip content="To the right" placement="right">
  <Button>Right</Button>
</Tooltip>

<Tooltip content="To the left" placement="left">
  <Button>Left</Button>
</Tooltip>

Delay

// Show after 500ms, hide after 200ms
<Tooltip content="Delayed tooltip" showDelay={500} hideDelay={200}>
  <Button>Hover me</Button>
</Tooltip>

Rich content

<Tooltip
  content={
    <Box p={8}>
      <Text style={{ fontWeight: 700 }}>Keyboard shortcut</Text>
      <Text>⌘ + S</Text>
    </Box>
  }
>
  <Button>Save</Button>
</Tooltip>

Controlled

const [open, setOpen] = useState(false)

<Tooltip
  content="Controlled tooltip"
  open={open}
  onOpenChange={setOpen}
>
  <Button onPress={() => setOpen(o => !o)}>Toggle</Button>
</Tooltip>

Props

PropTypeDescription
contentreqReactNodeTooltip content — string or any React element.
childrenreqReactElementThe trigger element. Must be a single React element that accepts ref.
placement"top" | "bottom" | "left" | "right"Where to show the tooltip relative to the trigger. Defaults to "top".
showDelaynumberMilliseconds to wait before showing. Defaults to 300.
hideDelaynumberMilliseconds to wait before hiding. Defaults to 100.
openbooleanControlled open state.
onOpenChange(open: boolean) => voidCalled when the tooltip open state changes.
disabledbooleanPrevent the tooltip from showing.
maxWidthnumber | stringMaximum width of the tooltip surface.

Accessibility

ℹ
Tooltip renders with role="tooltip" and is linked to its trigger via aria-describedby. The tooltip is shown on focus as well as hover, ensuring keyboard users see the content. While the tooltip is open, focus remains on the trigger element — tooltips are non-modal and do not trap focus.
⚠
On mobile / React Native, tooltips are shown on long-press since hover is not available.

Themes

Tooltip is Theme_Reactive — background, text color, and shadow are resolved from the Active_Theme at render time. Works across all five built-in themes: quasar, light, dark, aurora, and steins-gate.