Tooltip

Contextual information popups that appear on hover to provide helpful hints and details

Basic Tooltip

Simple tooltips on different elements

Hover me
Show Code

Tooltip Positions

Tooltips positioned around the target element

Hover me
Show Code

Tooltip Colors

Different colored tooltips for various contexts

Hover me
Show Code

Always Visible Tooltips

Tooltips that are always shown (useful for demonstrations)

Hover me
Show Code

Tooltips in Real Contexts

Practical examples of tooltips in UI elements

Hover me
Show Code

Usage Notes

  • Keep tooltip text concise and helpful - aim for one sentence
  • Position tooltips to avoid covering important UI elements
  • Use appropriate colors to convey meaning (warning for cautions, info for help)
  • Consider accessibility - tooltips should also be accessible via keyboard
  • Don't use tooltips for critical information that users must see
  • Test tooltip positioning on mobile devices where hover doesn't work