Tooltip

Hover-triggered tooltip component based on Radix UI with smooth animations and customizable positioning

Tooltip Positions

Top
auto
side="top"
Right
auto
side="right"
Bottom
auto
side="bottom"
Left
auto
side="left"

Basic Tooltip

Simple tooltip with default styling

Props:
{ children: "tooltip text" }

Icon Button with Tooltip

Common pattern for icon-only buttons

Props:
{ size: "icon" }

Help Icons

Information and help indicators

Props:
{ icon: "<HelpCircle />" }
Username
Email

Action Buttons

Tooltips for action toolbar

Props:
{ variant: "tertiary" }

Long Text Content

Tooltip with multiline text

Props:
{ children: "long text" }

Custom Offset

Adjust distance from trigger

Props:
{ sideOffset: 12 }

Interactive Trigger

Tooltip on custom trigger element

Props:
{ asChild: true }
Online

Badge with Tooltip

Status badge with explanation

Props:
{ trigger: "badge" }
PRO
VERIFIED
BETA

Keyboard Shortcuts

Display keyboard shortcuts in tooltips

Props:
{ children: "shortcut hint" }

All Positions Demo

Tooltip can appear in any direction

Props:
{ side: "top | right | bottom | left" }

Disabled State

Tooltips on disabled elements

Props:
{ disabled: true }

Rich Content

Tooltip with formatted content

Props:
{ children: "JSX content" }

Usage Guidelines

  • •Wrap your application with TooltipProvider for consistent behavior
  • •Use asChild prop on TooltipTrigger to merge props with child element
  • •For disabled buttons, wrap in a span to enable tooltip
  • •Default delay is 100ms (can be customized via delayDuration)
  • •Keep tooltip content concise and helpful - avoid redundant information
  • •Use tooltips for icon-only buttons to provide context and improve accessibility