FeedbackAvailable

Tooltip

Short supplementary help shown on hover and keyboard focus.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/tooltip.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { PlusIcon as Plus } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={<Button variant="outline" aria-label="Add component" />}
        >
          <Plus weight="bold" aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>Add a component to your collection</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check closed, open, highlighted, selected and disabled states where supported.
Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
TooltipProvider.delay	number	primitive default	Delay before showing a tooltip.

Accessibility

Rules that should remain intact when adapting the component to a product.

A tooltip does not replace a control label and must not contain interactive actions.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.