Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Preview Docs

Features

Appears on hover and keyboard focus

Built with Radix UI Tooltip primitive

Automatic positioning and collision detection

Customizable delay before showing

Arrow pointer to trigger element

Keyboard accessible with focus states

Shadcn/ui Tooltip - Figma Component

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.

Every Tooltip variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.

Your questions, answered

Contextual help in Figma

The shadcn/ui figma Tooltip provides brief explanations on hover and focus. Design icon button labels, format hints, and keyboard shortcuts in Figma. This shadcn figma component enhances usability without cluttering.

Tooltip timing

Design Tooltips in Figma with the shadcn/ui figma component—300-500ms delay. Prototype interfaces where tooltips appear responsively without accidental triggers during mouse movement, matching shadcn/ui timing behavior.

Brief content

This shadcn figma Tooltip supports short text labels (1-2 sentences max). Design helpful tooltips in Figma like "Save changes (⌘S)" that add value, not restate obvious information.

Keyboard accessible

The shadcn/ui figma Tooltip appears on hover and keyboard focus. Design accessible help in Figma where tooltips work with aria-describedby, ensuring keyboard users access all contextual information.