Tooltips

  1. Components
  2. Tooltips

Placement explorer

Short hints above, beside, or below the trigger.

Document toolbar

Accessible labels remain available without the tooltip.

Form guidance

Explain an input without crowding the form.

Keyboard focus

Show guidance when the trigger receives focus.

Delayed hints

Wait briefly before showing supporting text.

Rich text hint

Sanitized formatting for a concise explanation.

Inline navigation hints

Add context to real workspace destinations.

Review the team profile, organize workspace files, or explore your task list.

Unavailable action

Explain a disabled control with a focusable wrapper.

Colored tooltips

Hover or focus to preview the project theme colors.

Compact action labels

Different button styles with consistent hints.

Status information

Keep longer explanations outside the row.

Workspace onboarding

18 of 24 tasks complete

Profile context

Attach a hint to a compact identity control.

Liam Carter

Liam Carter

Product Manager

Tooltip playground

Enter a short hint and preview it.

The preview closes after four seconds. Press Escape to dismiss it.