---
title: Tooltip
description: Hover-triggered informational overlay anchored to a trigger element.
sidebar:
  order: 3
search:
  tags: [hint, hover, label, floating]
---

# Tooltip

> Hover-triggered informational overlay anchored to a trigger element.

## Import

```tsx
import { Tooltip } from 'moraine'
```

## Slot Structure

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

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

## Examples

### Placements

Tooltip positioned on each side.

```tsx
function Placements() {
  const PLACEMENTS = ['top', 'right', 'bottom', 'left'] as const

  return (
    <div class="flex flex-wrap gap-4 items-center">
      <For each={PLACEMENTS}>
        {(placement) => (
          <Tooltip text={`Tooltip on ${placement}`} placement={placement}>
            <Button variant="outline">{placement}</Button>
          </Tooltip>
        )}
      </For>
    </div>
  )
}
```

### Trigger Types

Tooltip on buttons and inline text.

```tsx
function TriggerTypes() {
  return (
    <div class="flex flex-wrap gap-4 items-center">
      <Tooltip text="Button trigger">
        <Button>Hover me</Button>
      </Tooltip>
      <p class="text-sm text-foreground">
        Hover over this{' '}
        <Tooltip text="Inline tooltip">
          <span class="font-medium underline cursor-help">underlined text</span>
        </Tooltip>{' '}
        to see a tooltip.
      </p>
    </div>
  )
}
```

### Keyboard Shortcuts

Display keyboard shortcut hints alongside tooltip text.

```tsx
function KeyboardShortcuts() {
  return (
    <div class="flex flex-wrap gap-4 items-center">
      <Tooltip text="Save" kbds={['Ctrl', 'S']} open>
        <Button variant="outline" leading="i-lucide-save">
          Save
        </Button>
      </Tooltip>
      <Tooltip text="Undo" kbds={['Ctrl', 'Z']}>
        <Button variant="outline" leading="i-lucide-undo">
          Undo
        </Button>
      </Tooltip>
      <Tooltip text="Search" kbds={['Ctrl', 'K']}>
        <Button variant="outline" leading="i-lucide-search">
          Search
        </Button>
      </Tooltip>
    </div>
  )
}
```

### Text Only vs Shortcuts Only

Content variations.

```tsx
function TextOnlyVsShortcutsOnly() {
  const [invert, setInvert] = createSignal(false)

  return (
    <div class="flex flex-wrap gap-4 items-center">
      <Tooltip invert={invert()} text="Just a message">
        <Button variant="outline">Text only</Button>
      </Tooltip>
      <Tooltip invert={invert()} kbds={['Ctrl', 'Shift', 'P']}>
        <Button variant="outline">Shortcuts only</Button>
      </Tooltip>
      <Tooltip invert={invert()} text="Command palette" kbds={['Ctrl', 'Shift', 'P']}>
        <Button variant="outline">Both</Button>
      </Tooltip>
      <Switch checked={invert()} onChange={setInvert} label="Invert" />
    </div>
  )
}
```

## API Reference

### Attributes

#### `content`

Tooltip bubble positioned next to its trigger.

##### CSS Variables

| Attribute | Type | Description |
| --- | --- | --- |
| --mo-popper-content-transform-origin | string | CSS custom property exposed by this slot. |

##### Data Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| data-placement | string \| undefined | State or slot attribute exposed for styling hooks and selectors. |

##### ARIA Attributes

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

#### `trigger`

Element that receives hover or focus interactions for the tooltip.

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-controls | boolean \| string \| undefined | References the controlled element while the related content is mounted. |
| aria-describedby | boolean \| string \| undefined | References descriptive text associated with the control. |
| aria-expanded | boolean \| string \| undefined | Indicates whether the controlled content is expanded. |

#### `text`

Primary text region inside the tooltip bubble.

#### `kbds`

Container for shortcut hints displayed beside tooltip text.

#### `kbd`

Individual keyboard key hint inside the tooltip.

### 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. |

### ARIA

Accessibility attributes and roles emitted by the component markup.

| Attribute | Type | Description |
| --- | --- | --- |
| aria-checked | boolean \| string \| undefined | Accessibility attribute forwarded by the rendered component. |
| aria-controls | boolean \| string \| undefined | References the controlled element while the related content is mounted. |
| aria-describedby | boolean \| string \| undefined | References descriptive text associated with the control. |
| aria-disabled | boolean \| string \| undefined | Indicates that the control is disabled. |
| aria-expanded | boolean \| string \| undefined | Indicates whether the controlled content is expanded. |
| aria-haspopup | boolean \| string \| undefined | Accessibility attribute forwarded by the rendered component. |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |
| aria-label | boolean \| string \| undefined | Provides an accessible label when visible text is not sufficient. |
| aria-labelledby | boolean \| string \| undefined | References the element that labels the control or region. |
| aria-modal | boolean \| string \| undefined | Identifies modal content that traps interaction outside the dialog. |
| role | string | Defines the semantic role exposed to assistive technology. |

### Data Attributes

State and slot attributes exposed for styling hooks and selectors.

| Attribute | Type | Description |
| --- | --- | --- |
| data-disabled | string \| undefined | Present when the component or item is disabled. |
| data-expanded | string \| undefined | State or slot attribute exposed for styling hooks and selectors. |
| data-highlighted | string \| undefined | Present when the item is highlighted by pointer or keyboard navigation. |
| data-placement | string \| undefined | State or slot attribute exposed for styling hooks and selectors. |
| data-positioned | string \| undefined | State or slot attribute exposed for styling hooks and selectors. |
| data-selected | string \| undefined | Present when the item is selected. |
| data-slot | string | Identifies the rendered slot for styling hooks and selectors. |