Component reference

Tooltip

Non-interactive help.

Preview

Hover and keyboard focus

Hovering briefly adds a description and keyboard focus shows it immediately; Escape closes it and keeps focus. Necessary information always stays on the page.

packages/meowtail/stories/foundations.stories.tsxline 140tsx

render: () => (
  <Measure width="narrow">
    <Stack gap="relaxed" align="start">
      <p>The standalone preview keeps the current work page.</p>
      <Tooltip
        id="preview-help"
        content="View the current component in a standalone window to compare different sizes."
        trigger={(props) => (
          <Button {...props} variant="outline">
            Standalone preview
          </Button>
        )}
      />
      <Input aria-label="Next item" placeholder="Tabbing here closes the tooltip" />
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Tooltip } from "meowtail";

<Tooltip
  id="preview-help"
  content="View the current component in a standalone window to compare different sizes."
  trigger={(props) => (
    <Button {...props} variant="outline">
      Standalone preview
    </Button>
  )}
/>

API reference

Popover owns positioning, top-layer dismissal and cleanup.

Props

Prop	Type	Default
`id`Required	`string`	–
`content`Required	`string`	–
`trigger`RequiredUse a focusable control with its own accessible name; this is supplementary text.	`(bindings: TooltipTriggerBindings) => Child`	–
`delay`	`number`	`350`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootcontent

Registry

The component is registered as tooltip in the meowtail component registry.