Tooltip

A floating micro-plate that labels a control on hover or focus, with mono shortcut hints.

@emboss/tooltip

Installation

pnpm dlx shadcn@latest add @emboss/tooltip

Usage

example.tsx

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

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button size="icon" aria-label="Save" />} />
        <TooltipContent>Save the current preset</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API reference

TooltipProvider

Groups tooltips so neighbors open without re-waiting the delay.

Prop	Type	Default	Description
delay	number	600	Hover delay in milliseconds before the tooltip opens.

Tooltip / TooltipTrigger / TooltipContent

Root state, the anchored control, and the floating plate.

Prop	Type	Default	Description
sideOffset	number	8	Gap between trigger and plate (TooltipContent).

Keyboard

Keys	Action
`Tab`	Focusing the trigger shows the tooltip.
`Esc`	Hides the tooltip.

Source

View source — tooltip.tsx

tooltip.tsx

"use client";

import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
import { cn } from "@/lib/utils";

/**
 * A floating micro-plate in inverse ink, for names and shortcut hints.
 * Wrap a region in TooltipProvider to share hover delay between tooltips.
 *
 * @example
 * <TooltipProvider>
 *   <Tooltip>
 *     <TooltipTrigger render={<button>Save</button>} />
 *     <TooltipContent>Save — ⌘S</TooltipContent>
 *   </Tooltip>
 * </TooltipProvider>
 */
function TooltipProvider(
  props: React.ComponentProps<typeof BaseTooltip.Provider>,
) {
  return <BaseTooltip.Provider delay={400} {...props} />;
}

function Tooltip(props: React.ComponentProps<typeof BaseTooltip.Root>) {
  return <BaseTooltip.Root {...props} />;
}

function TooltipTrigger(
  props: React.ComponentProps<typeof BaseTooltip.Trigger>,
) {
  return <BaseTooltip.Trigger data-slot="tooltip-trigger" {...props} />;
}

function TooltipContent({
  className,
  sideOffset = 6,
  children,
  ...props
}: React.ComponentProps<typeof BaseTooltip.Popup> & {
  sideOffset?: number;
}) {
  return (
    <BaseTooltip.Portal>
      <BaseTooltip.Positioner sideOffset={sideOffset} className="z-50">
        <BaseTooltip.Popup
          data-slot="tooltip-content"
          className={cn(
            "origin-(--transform-origin) rounded-sm bg-ink px-2.5 py-1 text-xs font-medium text-ink-inverse shadow-float-1 transition-[opacity,scale] duration-(--duration-press) ease-(--ease-press) data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
            className,
          )}
          {...props}
        >
          {children}
        </BaseTooltip.Popup>
      </BaseTooltip.Positioner>
    </BaseTooltip.Portal>
  );
}

export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

PopoverA floating panel anchored to its trigger, with title and description wired for assistive tech.KbdA machined keycap for keyboard shortcuts — a semantic kbd element with a raised, lit-from-above profile.