Skip to main content

​
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

​
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

​
Tooltip (Root)

​
open
boolean
Controlled open state.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
defaultOpen
boolean
default:"false"
Uncontrolled default open state.
​
delayDuration
number
default:"400"
Hover delay before the tooltip appears (ms).

​
TooltipContent

​
side
string
default:"top"
Preferred placement. Values: top · bottom · left · right
​
sideOffset
number
default:"4"
Distance from the trigger in pixels.
​
align
string
default:"center"
Alignment along the placement axis. Values: start · center · end
​
size
string
default:"md"
Tooltip size. Values: sm · md
​
className
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