Tooltip

A small contextual label that appears on hover or keyboard focus. Built on Radix UI Tooltip. Requires a TooltipProvider ancestor — add it once at your app root or layout.

Built on Radix UI.

✓Opens on hover and keyboard focus
✓Animated entry/exit with fade and zoom
✓Portal-based — renders outside the DOM flow
✓Configurable delay, side, alignment
✓Requires TooltipProvider once at the root

import { Tooltip }from "@aetherstack/ui"

tooltip.tsx

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"

// Add TooltipProvider once in your layout or root component
export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This is a tooltip</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Usage

Icon button tooltip

Always add tooltips to icon-only buttons.

Different sides

Control tooltip position with the side prop.

With delay

Use delayDuration to control how long before the tooltip appears.

Rich tooltip content

Props

Prop	Type	Default	Description

TooltipProvider

Prop	Type	Default	Description
delayDuration	number	700	Milliseconds before the tooltip opens after hovering.
skipDelayDuration	number	300	Milliseconds before delay is skipped (when moving between tooltips quickly).
disableHoverableContent	boolean	false	When true, tooltip closes immediately when the pointer moves to the content.

Tooltip (Root)

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.
delayDuration	number	—	Override the provider delay for this specific tooltip.

TooltipContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"top"	Preferred side to render.
sideOffset	number	4	Distance from the trigger in pixels.
align	"start" \| "center" \| "end"	"center"	Alignment relative to the trigger.
className	string	—	Additional classes. Use max-w-* for rich content.

* Required props

Accessibility

→Tooltip text is announced by screen readers when the trigger receives focus.
→Tooltip content is not interactive — do not put buttons or links inside a tooltip.
→For interactive content on hover, use Popover (not included in this set) instead.
→Always add aria-label to icon-only triggers — the tooltip alone is not sufficient for screen readers that don't use hover.
→Tooltips must not contain essential information — always ensure the UI is usable without tooltip text visible.