Tooltip

Tooltips display contextual information when users hover over or focus on an element. They provide helpful hints without cluttering the interface.

When to use

check_circleWhen to use

  • To explain the purpose of an icon or button
  • To provide additional context for truncated text
  • For helpful hints on form fields or complex UI
  • When the information is supplementary, not critical

cancelWhen not to use

  • For critical information users must see
  • On mobile devices (hover is not available)
  • For long-form content (use modals or popovers instead)
  • When the trigger element already has clear labeling

Basic Tooltip

Text Content

Simple tooltip with text

Hover to see
Icon with tooltip
Hover over me
On text

Positions

Different Positions

Tooltip can appear on any side of the trigger

Top (default)
Bottom
Left
Right

Delay

Custom Delays

Control how quickly the tooltip appears

No delay
Default (200ms)
Slow (500ms)

Disabled State

Disabled Tooltip

Disabled

Usage

tsx
import { Tooltip } from '@/components/Tooltip';

// Basic tooltip
<Tooltip content="This is a helpful tooltip">
  <button>Hover me</button>
</Tooltip>

// With position
<Tooltip content="Appears below" position="bottom">
  <span>Hover for info</span>
</Tooltip>

// With custom delay
<Tooltip content="Slower to appear" delay={500}>
  <button>Hover me</button>
</Tooltip>
tsx
// With custom content
<Tooltip content={
  <div>
    <strong>Advanced tooltip</strong>
    <p>With multiple lines</p>
  </div>
}>
  <button>Complex content</button>
</Tooltip>

// Disabled state
<Tooltip content="Won't show" disabled>
  <button>Disabled tooltip</button>
</Tooltip>

// Different positions
<Tooltip content="Top" position="top">
  <button>Top</button>
</Tooltip>
<Tooltip content="Bottom" position="bottom">
  <button>Bottom</button>
</Tooltip>
<Tooltip content="Left" position="left">
  <button>Left</button>
</Tooltip>
<Tooltip content="Right" position="right">
  <button>Right</button>
</Tooltip>

Props

PropTypeDefaultDescription
contentReactNode-Content to display in the tooltip
childrenReactNode-Element that triggers the tooltip
position'top' | 'bottom' | 'left' | 'right''top'Position of the tooltip relative to the trigger
delaynumber200Delay in milliseconds before showing the tooltip
disabledbooleanfalseWhether the tooltip is disabled
classNamestring-Additional CSS class for the tooltip

Accessibility

  • Uses role="tooltip" for screen reader support
  • Connected to trigger via aria-describedby
  • Visible on keyboard focus, not just mouse hover
  • Automatically hides on blur/mouse leave
  • Positioned to stay within viewport boundaries
  • High contrast text for readability

Best Practices

  • Keep it short: Tooltips should be concise, ideally one or two lines
  • Delay timing: Use 200ms default delay to prevent accidental triggers
  • Don't hide critical info: Only use for supplementary information
  • Position carefully: Choose position that doesn't obscure related content
  • Mobile consideration: Provide alternative ways to access info on touch devices
  • Consistent language: Use clear, action-oriented text