Skip to content
Proto UI
Preview runtime
选择适配器 Runtime Web Components React Vue Vue 2
Preferences and community
Language
选择语言 / Select Language English English 简体中文 简体中文
Community

Search

Loading search…
Toggle theme

Tooltip

Draft shadcn presentation over the Base Tooltip family.

This draft family contains Group, Root, Trigger, and Content. Base Tooltip remains the sole owner of open state, controlled ownership, disabled behavior, pointer and focus intent, delay and dismissal sequencing, aria-describedby, presence, Escape handling, renderer-owned Portal projection, and anchored positioning. The shadcn layer adds only Group layout, Trigger feedback, and a compact Content surface.

The comparison baseline is shadcn-ui/ui revision f31ed81983653919dd4fe77aee4b4859f610f1dc, apps/v4/registry/new-york-v4/ui/tooltip.tsx. Its Provider defaults pointer delay to 0ms; Proto UI deliberately keeps the Base Group defaults of 700ms open, 100ms close, and 300ms skip. Its Content defaults sideOffset to 0; Proto UI inherits the Base default of 4. Portal remains a renderer projection, and Arrow is absent because no governed arrow geometry channel exists.

The Content static surface separately follows the base-nova registry snapshot retrieved on 2026-10-10 (JSON SHA256 2f55867faecee2d3616cfd8c6a80b538909a21e62fdfa2788b1ead56093e5395; MIT). Its deployment Git SHA is unknown; this is a content-pinned visual reference, not a replacement API baseline. This snapshot uses sideOffset 4. The surface uses theme foreground for its background and background for its text, so Light/Dark can invert the colors without fixed black/white values. It uses inline-flex, fit-content width, a 20rem maximum, and 6px gap, without the former border, shadow, or overflow clipping. Existing max-w-80 expresses upstream’s default max-w-xs limit. Arrow, transform-origin, directional enter/exit motion, and kbd descendant styling remain unaligned. This static-recipe migration does not claim full Tooltip parity.

Import the family from @proto.ui/prototypes-shadcn/tooltip, or generate its React facade with proto-ui add react shadcn-tooltip. Content remains supplementary, non-focusable, and non-essential; interactive task content belongs to Popover or a non-modal Dialog.

Web Components React Vue Vue 2
Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

Suggested acceptance path

Section titled “Suggested acceptance path”
  1. Hover Account and confirm the cold Tooltip opens after about 700ms; leave early and confirm no flash appears.
  2. Move to Notifications before the 300ms warm window expires and confirm the sibling opens immediately with one active owner.
  3. Tab to either Trigger and confirm immediate opening, a visible focus ring, and no button role.
  4. Confirm Content is portaled outside the preview frame, remains linked by aria-describedby, and contains no focusable control or Arrow.
  5. Press Escape and confirm Content closes while focus remains on Trigger.
  6. Repeat in Web Components, React, Vue, and Vue 2, in both Light and Dark.

The related entities are draft; this page describes the current cataloged direction, not a stable compatibility guarantee.