overlaystooltip

Tooltip

Hover-triggered informational overlay anchored to a trigger element.

Import#

import { Tooltip } from 'moraine'

Slot Structure#

Wrapper trigger with a floating content portal containing text and optional keyboard hints.

trigger
└── content (portal)
    ├── text (optional)
    └── kbds (optional)
        └── kbd (×n)

Examples#

Placements#

Tooltip positioned on each side.

1
function Placements() {
2
  const PLACEMENTS = ['top', 'right', 'bottom', 'left'] as const
3

4
  return (
5
    <div class="flex flex-wrap gap-4 items-center">
6
      <For each={PLACEMENTS}>
7
        {(placement) => (
8
          <Tooltip text={`Tooltip on ${placement}`} placement={placement}>
9
            <Button variant="outline">{placement}</Button>
10
          </Tooltip>
11
        )}
12
      </For>
13
    </div>
14
  )
15
}

Trigger Types#

Tooltip on buttons and inline text.

1
function TriggerTypes() {
2
  return (
3
    <div class="flex flex-wrap gap-4 items-center">
4
      <Tooltip text="Button trigger">
5
        <Button>Hover me</Button>
6
      </Tooltip>
7
      <p class="text-sm text-foreground">
8
        Hover over this{' '}
9
        <Tooltip text="Inline tooltip">
10
          <span class="font-medium underline cursor-help">underlined text</span>
11
        </Tooltip>{' '}
12
        to see a tooltip.
13
      </p>
14
    </div>
15
  )
16
}

Keyboard Shortcuts#

Display keyboard shortcut hints alongside tooltip text.

1
function KeyboardShortcuts() {
2
  return (
3
    <div class="flex flex-wrap gap-4 items-center">
4
      <Tooltip text="Save" kbds={['Ctrl', 'S']} open>
5
        <Button variant="outline" leading="i-lucide-save">
6
          Save
7
        </Button>
8
      </Tooltip>
9
      <Tooltip text="Undo" kbds={['Ctrl', 'Z']}>
10
        <Button variant="outline" leading="i-lucide-undo">
11
          Undo
12
        </Button>
13
      </Tooltip>
14
      <Tooltip text="Search" kbds={['Ctrl', 'K']}>
15
        <Button variant="outline" leading="i-lucide-search">
16
          Search
17
        </Button>
18
      </Tooltip>
19
    </div>
20
  )
21
}

Text Only vs Shortcuts Only#

Content variations.

1
function TextOnlyVsShortcutsOnly() {
2
  const [invert, setInvert] = createSignal(false)
3

4
  return (
5
    <div class="flex flex-wrap gap-4 items-center">
6
      <Tooltip invert={invert()} text="Just a message">
7
        <Button variant="outline">Text only</Button>
8
      </Tooltip>
9
      <Tooltip invert={invert()} kbds={['Ctrl', 'Shift', 'P']}>
10
        <Button variant="outline">Shortcuts only</Button>
11
      </Tooltip>
12
      <Tooltip invert={invert()} text="Command palette" kbds={['Ctrl', 'Shift', 'P']}>
13
        <Button variant="outline">Both</Button>
14
      </Tooltip>
15
      <Switch checked={invert()} onChange={setInvert} label="Invert" />
16
    </div>
17
  )
18
}

API Reference#

Attributes#

Slotcontent6 attributes

Tooltip bubble positioned next to its trigger.

CSS Variables

CSS Variable	Description
--mo-popper-content-transform-origin	CSS custom property exposed by this slot.

Data Attributes

Data Attribute	Description
data-placement	State or slot attribute exposed for styling hooks and selectors.

ARIA Attributes

ARIA Attribute	Description
aria-describedby	References descriptive text associated with the control.
aria-labelledby	References the element that labels the control or region.
aria-modal	Identifies modal content that traps interaction outside the dialog.
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
children	`JSX.Element`	—	The reference element that triggers the tooltip.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`TooltipT.Classes \| undefined`	—	—
closeDelay	`number \| undefined`	`200`	Delay in milliseconds before closing after leaving trigger or content.
defaultOpen	`boolean \| undefined`	—	—
disabled	`boolean \| undefined`	—	—
forceMount	`boolean \| undefined`	—	—
id	`string \| undefined`	—	—
instantOpenDelay	`number \| undefined`	`300`	Delay in milliseconds to skip the open delay for the next trigger after closing.
invert	`boolean \| undefined`	—	—
kbds	`string[] \| undefined`	—	Keyboard shortcuts to display next to the text.
onOpenChange	`((open: boolean) => void) \| undefined`	—	—
open	`boolean \| undefined`	—	—
openDelay	`number \| undefined`	`600`	Delay in milliseconds before opening on hover or focus.
placement	`Placement \| undefined`	—	—
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
side	`"bottom" \| "top" \| "right" \| "left" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`TooltipT.Styles \| undefined`	—	—
text	`JSX.Element`	—	Primary text content or element to display.