Tooltip

Feedback

Popup hint that appears on hover or focus. Positioned automatically.

Four placement sidesHover and focus

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

tooltip.tsx

"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@dashboardpack/core/components/ui/tooltip";
import { Button } from "@dashboardpack/core/components/ui/button";
import { Plus } from "lucide-react";

export default function TooltipExample() {
  return (
    <TooltipProvider delayDuration={200}>
      <div className="flex gap-4">
        {(["top", "right", "bottom", "left"] as const).map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger asChild>
              <Button
                size="icon"
                variant="outline"
                aria-label={`Add project (${side} hint)`}
              >
                <Plus />
              </Button>
            </TooltipTrigger>
            <TooltipContent side={side}>Create a project</TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

Usage

Use for short, supplementary hints. Wrap tooltips in TooltipProvider and use asChild to retain the semantics of the trigger. Essential instructions belong in visible content.

Import

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@dashboardpack/core/components/ui/tooltip";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Tooltip props
Prop	Type / Default	Description
delayDuration (TooltipProvider)	`number` Default: 0	Milliseconds before showing a hint.
side (TooltipContent)	`top \| right \| bottom \| left` Default: top	Preferred physical placement.
sideOffset (TooltipContent)	`number` Default: 0	Gap from the trigger.
open / onOpenChange	`boolean / (open: boolean) => void` Default: —	Optional controlled visibility.

Build with these too

Popover Button