Skip to content
Components / Overlays

Tooltip

A short name for an icon button.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/tooltip gets this control. See shims.

    npx shadcn@latest add @fabrials/tooltip

API reference

Prop / exportTypeDescription
childrenReactNodeThe trigger and the tooltip content.

Behavior

The tooltip repeats a name that is also available to assistive tech. It is not the only label.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.