Tooltip

Hover or focus a trigger to surface a short label. Auto-flips when it would clip the viewport.

Tooltip wraps a single trigger element. The label appears on hover or focus after a short delay, dismisses on mouse leave, blur, or Escape.

Try it live

import { Tooltip } from "@plyxui/comps";
import { Box, Button, Stack } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Stack direction="horizontal" gap={3}>
      <Tooltip label="Saves your draft" side="top">
        <Button variant="primary">Hover me (top)</Button>
      </Tooltip>
      <Tooltip label="Shortcut: ⌘S" side="bottom">
        <Button variant="ghost">Bottom</Button>
      </Tooltip>
      <Tooltip label="Right side, longer delay" side="right" delay={500}>
        <Button variant="ghost">Right</Button>
      </Tooltip>
    </Stack>
  </Box>
);
}

API

import { Tooltip } from "@plyxui/comps";

<Tooltip label="Save the document">
  <Button iconLeading={<Icon name="save" />} aria-label="Save" />
</Tooltip>

<Tooltip label="Custom side and delay" side="right" delay={400}>
  <button>Hover me</button>
</Tooltip>

Behavior

• Trigger must be a single React element. Tooltip attaches onMouseEnter, onMouseLeave, onFocus, onBlur, and aria-describedby via cloneElement.
• The preferred side is honored when it fits. If it would clip the viewport, the tooltip flips to the opposite side and clamps to the edges.
• Default open delay is 250 ms; close is immediate so the UI feels snappy.
• Escape dismisses while open.

Props

Native

The React Native build ships a pass-through that renders the child unchanged. The hover gesture doesn't exist on touch platforms; a long-press affordance is on the roadmap. Until then the JSX stays platform-agnostic so you don't need to fork the call site.