Tooltip

Overview

Delete item

Top (default)

Appears on the right

Tooltip shows brief text on hover or focus. Use it to clarify icon buttons, explain truncated content, or surface keyboard shortcuts. Tooltips auto-position to stay visible within the viewport.

Installation

npm install @araf-ds/core

yarn add @araf-ds/core

pnpm add @araf-ds/core

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="ghost" size="icon">
            <TrashIcon size={16} />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Delete item</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Variants

Basic

Delete item

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="icon">
        <TrashIcon size={16} />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Delete item</TooltipContent>
  </Tooltip>
</TooltipProvider>

Placement

<TooltipContent side="top">Tooltip above</TooltipContent>
<TooltipContent side="bottom">Tooltip below</TooltipContent>
<TooltipContent side="left">Tooltip left</TooltipContent>
<TooltipContent side="right">Tooltip right</TooltipContent>

With Keyboard Shortcut

Save ⌘S

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon"><SaveIcon size={16} /></Button>
  </TooltipTrigger>
  <TooltipContent>
    Save <kbd className="ml-1 rounded bg-white/20 px-1 text-xs">⌘S</kbd>
  </TooltipContent>
</Tooltip>

API Reference

boolean

Controlled open state.

(open: boolean) => void

Callback fired when the open state changes.

boolean

default:"false"

Uncontrolled default open state.

number

default:"400"

Hover delay before the tooltip appears (ms).

TooltipContent

string

default:"top"

Preferred placement. Values: top · bottom · left · right

number

default:"4"

Distance from the trigger in pixels.

string

default:"center"

Alignment along the placement axis. Values: start · center · end

string

default:"md"

Tooltip size. Values: sm · md

string

Additional Tailwind classes for custom overrides.

Accessibility

Tooltip content uses role="tooltip" with a unique id
The trigger has aria-describedby pointing to the tooltip id
Tooltip opens on hover AND keyboard focus — never only on hover
Pressing Escape dismisses the tooltip
Do not put interactive elements (links, buttons) inside tooltip content

Do’s & Don’ts

Do

Use Tooltip to label icon-only buttons
Keep tooltip text to one short sentence or a keyboard shortcut
Use side="bottom" for elements at the top of the viewport
Always make the tooltip trigger keyboard-focusable

Don't

Don’t put interactive elements (links, buttons) inside tooltips
Don’t use Tooltip to hide essential information — it must be discoverable
Don’t use Tooltip for mobile-only touch targets — hover doesn’t work on touch
Don’t add long paragraphs — use a Popover for rich content

Actions

Forms

Data Display

Feedback

Navigation

Layout

Charts

Icons

Overview

Installation

Usage

Variants

Basic

Placement

With Keyboard Shortcut

API Reference

Tooltip (Root)

TooltipContent

Accessibility

Do’s & Don’ts

Do

Don't

​Overview

​Installation

​Usage

​Variants

​Basic

​Placement

​With Keyboard Shortcut

​API Reference

​Tooltip (Root)

​TooltipContent

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Variants

Basic

Placement

With Keyboard Shortcut

API Reference

Tooltip (Root)

TooltipContent

Accessibility

Do’s & Don’ts