Tooltip

Hover label for compact UI elements.

stableBase UI Tooltip

Preview

Code

tsx

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

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
        <TooltipContent>Helpful hint about this action</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

Prop	Type	Default	Description
open	`boolean`	—	Controlled open state.
defaultOpen	`boolean`	—	Uncontrolled initial open state.
onOpenChange	`(open: boolean) => void`	—	Called when the open state changes.
delay	`number`	—	Override the provider's delay for this instance.

Sub-components

TooltipProvider— Wraps the app. Required.

Prop	Type	Default	Description
delay	`number`	~600	ms before tooltips open on hover. Lower for dense ops UIs.

TooltipTrigger— Element to hover/focus. Supports `render` for asChild.

TooltipContent— The floating label.

Prop	Type	Default	Description
side	`"top" \| "right" \| "bottom" \| "left"`	—	Anchor side relative to the trigger.
sideOffset	`number`	6	Pixel gap.
align	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
variant	`"solid" \| "glass"`	"solid"	Surface treatment. `glass` for C3 templates over canvas.

Built on Base UI Tooltip. Provider must wrap the app or section.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/tooltip.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
import type { ComponentPropsWithoutRef, ReactNode } from "react";

export const TooltipProvider = BaseTooltip.Provider;
export const Tooltip = BaseTooltip.Root;
export const TooltipTrigger = BaseTooltip.Trigger;

export function TooltipContent({
  className,
  children,
  side,
  sideOffset = 6,
  align,
  variant = "solid",
  ...props
}: ComponentPropsWithoutRef<typeof BaseTooltip.Popup> & {
  side?: "top" | "right" | "bottom" | "left";
  sideOffset?: number;
  align?: "start" | "center" | "end";
  variant?: "solid" | "glass";
  children?: ReactNode;
}) {
  return (
    <BaseTooltip.Portal>
      <BaseTooltip.Positioner side={side} sideOffset={sideOffset} align={align} className="z-[100]">
        <BaseTooltip.Popup
          className={cn(
            "rounded-md border border-border px-2.5 py-1.5 text-xs text-fg shadow-md",
            variant === "glass" ? "surface-glass-panel" : "bg-surface-elevated",
            "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
            "transition-opacity duration-150",
            className,
          )}
          {...props}
        >
          {children}
        </BaseTooltip.Popup>
      </BaseTooltip.Positioner>
    </BaseTooltip.Portal>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmTooltip (extends Tooltip). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmTooltip;

PrizmTooltip()
PrizmTooltip(String text)

Prop	Type	Default	Description
showDelay	`ObjectProperty<Duration>`	400ms	Hover delay before the tooltip appears (inherited from Tooltip).

Thin subclass of Tooltip; surface-elevated background + hairline border via the .prizm-tooltip rules. Install with control.setTooltip(...). The web `glass` variant is NOT ported (liquid glass is web-only). Mirrors components/ui/tooltip.tsx.