Skip to main content

Tooltip

Show supplemental, non-interactive information on hover or focus.

Composition
View as MarkdownSource Code

Use Tooltip for supplemental information on hover or focus. The trigger must still have its own accessible name when the control needs one.

Basic usage#

import { Button, Tooltip } from 'moraine'

export function Example() {
  return (
    <Tooltip>
      <Tooltip.Trigger as={Button}>Save</Tooltip.Trigger>
      <Tooltip.Content>Save changes</Tooltip.Content>
    </Tooltip>
  )
}

Playground#

Props
Slots

Anatomy#

Tooltip [component; no DOM]
├── Tooltip.Trigger [part; slot=trigger]
└── positioner [internal]
    └── Tooltip.Content [part; slot=content]
        └── kbds [slot]
            └── item [internal]

Content is portaled inside an internal positioning wrapper. String content uses the text slot; JSX content renders directly inside Content.

Usage#

Supplemental information#

Use tooltips for non-interactive hints that supplement an already labeled trigger. Do not use tooltip text as the sole accessible name of an icon-only control.

import { Button, Tooltip } from 'moraine'

export function HintsUsage() {
  return (
    <div class="flex gap-4 items-center">
      <Tooltip>
        <Tooltip.Trigger as={Button} variant="outline">
          Deploy History
        </Tooltip.Trigger>
        <Tooltip.Content text="View project deployment history and logs" />
      </Tooltip>
    </div>
  )
}

Triggering and shortcuts#

Tooltip opens from pointer hover and focus. kbds displays shortcut notation alongside the hint; it does not register that shortcut. Set kbdVariant on Tooltip.Content to default, outline, or invert. When omitted, keycaps follow the content’s invert setting.

import { Button, Tooltip } from 'moraine'

export function ShortcutsUsage() {
  return (
    <div class="flex gap-4 items-center">
      <Tooltip>
        <Tooltip.Trigger as={Button} leading="i-lucide:save">
          Save
        </Tooltip.Trigger>
        <Tooltip.Content text="Save changes" kbds={['command', 's']} kbdVariant="outline" />
      </Tooltip>
    </div>
  )
}

Keyboard interaction#

Focusing a focusable trigger can display the tooltip. Escape dismisses an open tooltip according to the shared tooltip overlay behavior; focus remains on the trigger rather than moving into the tooltip content.

Examples#

Keyboard shortcuts#

import { Button, Tooltip } from 'moraine'

export function KeyboardShortcuts() {
  return (
    <div class="p-2 b-1 b-border rounded-xl bg-card flex flex-wrap gap-2 items-center">
      <Tooltip>
        <Tooltip.Trigger as={Button} variant="outline" size="sm" leading="i-lucide:save">
          Save
        </Tooltip.Trigger>
        <Tooltip.Content text="Save changes" kbds={['⌘', 'S']} />
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger
          as={Button}
          variant="ghost"
          size="sm"
          leading="i-lucide:bold"
          aria-label="Bold"
        />
        <Tooltip.Content text="Bold formatting" kbds={['⌘', 'B']} />
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger
          as={Button}
          variant="ghost"
          size="sm"
          leading="i-lucide:italic"
          aria-label="Italic"
        />
        <Tooltip.Content text="Italic formatting" kbds={['⌘', 'I']} />
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger
          as={Button}
          variant="ghost"
          size="sm"
          leading="i-lucide:code"
          aria-label="Code"
        />
        <Tooltip.Content text="Insert Code Block" kbds={['⌘', 'E']} />
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger
          as={Button}
          variant="ghost"
          size="sm"
          leading="i-lucide:search"
          aria-label="Search"
        />
        <Tooltip.Content text="Quick Search" kbds={['⌘', 'K']} />
      </Tooltip>
    </div>
  )
}

Attributes#

Attributes
data-closedSlot: tooltip-trigger, tooltip-contentDescription: Present when disclosure or transition content is closed.
data-disabledSlot: tooltip-triggerDescription: Present when the component, slot, or item is disabled.
data-expandedSlot: tooltip-trigger, tooltip-contentDescription: Present when the panel, accordion, or menu is expanded.
data-alignSlot: tooltip-contentDescription: Stores the resolved alignment of positioned content.
data-instant-motionSlot: tooltip-contentDescription: Present when enter and exit motion should complete immediately.
data-sideSlot: tooltip-contentDescription: Stores the resolved floating or drawer content side.

Props#

Tooltip#

Prop

Trigger#

Renders a <button> element by default.

Prop

Content#

Props for the Tooltip component. Renders a <div> element by default.

Prop