Neumorphism UI

Tooltip

Use Tooltip for brief, optional help on hover or keyboard focus, especially for a compact icon action.

Preview

Icon and keyboard-focus hints

Hover or focus a named watchlist icon and a text button to compare hints above and below their triggers.

Hover the button or move focus to it.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/tooltip

Install the shared base once, then add components and their dependencies with the CLI.

Icon and keyboard-focus hints

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/tooltip
Registry JSON

Usage

Place TooltipTrigger and TooltipContent within Tooltip and share a TooltipProvider where useful. Keep the trigger independently named; essential instructions belong in visible text.

"use client";

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

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button />}>Formatting</TooltipTrigger>
        <TooltipContent>Choose how text appears.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API Reference

Built on Base UI Tooltip by composing Provider, Root, Trigger, Portal, Positioner, and Popup. The default provider delay is 250ms, and the popup automatically avoids collisions around the trigger.

ComponentPropTypeDefaultDescription
TooltipProviderdelaynumber250The delay in milliseconds before opening the tooltip after pointer hover.
Tooltipopen / defaultOpenbooleanfalseThe controlled open state or initial uncontrolled open state.
TooltiponOpenChange(open: boolean) => void—Called when the open state changes.
TooltipTriggerrenderReactElement | (props, state) => ReactElement—Composes tooltip trigger behavior onto a button or link.
TooltipContentside / align"top" | "right" | "bottom" | "left" / "start" | "center" | "end""top" / "center"Positions the popup relative to the trigger.
TooltipContentsideOffsetnumber8The distance between the trigger and popup.

Accessibility

  • 01

    Tooltip does not replace the accessible name of its trigger, so icon buttons still need an aria-label.

  • 02

    Keep the content brief and supplementary; do not place essential instructions or error messages only in Tooltip.

  • 03

    Base UI opens Tooltip on keyboard focus as well as hover and closes it with Escape.