Tooltip

Short label shown on hover and keyboard focus; not for essential content.

Import

import { Tooltip, TooltipTrigger } from '@marbleui/ui'

Props

Prop	Type	Default
children *required	`ReactNode`	`—`
showArrow	`boolean`	`true`
variant	`'surface' \| 'inverted'`	`'inverted'`

<TooltipTrigger>

Re-exported from React Aria TooltipTrigger; see its documentation for props.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria OverlayArrow · React Aria Tooltip · React Aria TooltipTrigger. Follow the primitive's docs for the full keyboard map.

Usage notes

Short supplementary label on hover or keyboard focus. Never put essential information or interactive content in a tooltip.

<TooltipTrigger>
  <IconButton aria-label="Archive"><ArchiveIcon /></IconButton>
  <Tooltip>Archive</Tooltip>
</TooltipTrigger>

Tooltips don’t open on touch. For help users must be able to reach on any device, use ToggleTip (click to open).
The trigger must be focusable (Button, IconButton, Link).

Example source · show

import { Button } from '../button'
import { IconButton } from '../icon-button'
import { Kbd } from '../kbd'
import { Tooltip, TooltipTrigger } from './tooltip'

const Bold = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <path d="M6 12h9a4 4 0 0 1 0 8H6zM6 4h7a4 4 0 0 1 0 8H6z" />
  </svg>
)

export const styles = {
  Inverted: () => (
    <div className="flex gap-2">
      <TooltipTrigger delay={200}>
        <IconButton variant="outline" aria-label="Bold"><Bold /></IconButton>
        <Tooltip>Bold <span className="opacity-60">⌘B</span></Tooltip>
      </TooltipTrigger>
      <TooltipTrigger delay={200}>
        <Button variant="outline">Hover me</Button>
        <Tooltip placement="bottom">Tooltips also show on keyboard focus</Tooltip>
      </TooltipTrigger>
    </div>
  ),
  Surface: () => (
    <TooltipTrigger delay={200}>
      <Button variant="soft">Shortcuts</Button>
      <Tooltip variant="surface" placement="right">
        <span className="flex items-center gap-1">Search <Kbd>⌘</Kbd><Kbd>K</Kbd></span>
      </Tooltip>
    </TooltipTrigger>
  ),
}

Source: packages/ui/src/tooltip/tooltip.tsx

Catalog

Category: overlays
Priority: Foundation
Primitive: react-aria
React Aria: Tooltip
Base UI: Tooltip