Components

Tooltip

Short hint on hover and keyboard focus, with an optional shortcut line. Dark in both themes.

Usage

Use it to:

  • name an icon-only control
  • show a keyboard shortcut

Don’t use it to:

  • long explanations or interactive content (use Popover)
  • disabled buttons (they cannot receive focus; explain the reason in text)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TooltipExample.tsx
import { IconButton, Tooltip } from '@krackedui/motion';

export function TooltipDemo() {
  return (
    <Tooltip content="Add to favorites">
      <IconButton icon="star" label="Favorite" />
    </Tooltip>
  );
}

Examples

With shortcut

Side

Bubble

The static surface, for composition and documentation.

Add to favorites
Copy link
⌘⇧L

Dark theme

Updates

API Reference

Tooltip

Radix Tooltip; extra props go to Tooltip.Content. The child must be one focusable element (it becomes the trigger). Adds:

PropTypeDefault
content
ReactNode
shortcut
ReactNode
side
"top""right""bottom""left"
"bottom"
sideOffset
number
6
delayDuration
number
400
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void

TooltipBubble

The static surface (<div role="tooltip">). Adds:

PropTypeDefault
shortcut
ReactNode

TooltipProvider

Radix Tooltip.Provider: share one delay across many tooltips (optional; each Tooltip has its own).

PropTypeDefault

Accessibility

  • Opens on hover and on keyboard focus of the trigger; Escape closes it and focus stays on the trigger.
  • The text is linked to the trigger with aria-describedby, so it is read after the trigger’s name.
  • Never put links, buttons or essential information in a tooltip; it is not reachable on touch screens.
© 2026 Motion. Internal documentation.