Tooltip

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Tooltip

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof TooltipPrimitive.Root>

TooltipContent

className
sideOffset = 0
children

React.ComponentProps<typeof TooltipPrimitive.Content>

TooltipProvider

delayDuration = 0

React.ComponentProps<typeof TooltipPrimitive.Provider>

TooltipTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof TooltipPrimitive.Trigger>

Code

// owner: Sona
"use client";

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

export default function TooltipExample() {
  return (
    <div className="flex items-center gap-6">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>Shows contextual help when hovering.</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Primary action</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Tooltips can be placed on any side.
        </TooltipContent>
      </Tooltip>
    </div>
  );
}

Tooltip

Component preview

On this page

Command Palette