Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

TOOLTIP

PreviousToast
OverviewNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: product page — wishlist icon hint

Classic Mint Pod

5% · 2 ml · mesh coil

$12

Add to wishlist
  • Provide additional context for icon-only buttons or truncated text
  • Explain a UI element without cluttering the layout
  • Show keyboard shortcuts or brief helper text

Usage Guidelines

DO

Keep tooltip text concise (1–2 lines max). Use Rich Tooltip for multi-line content with actions

Don’t

Don't place critical information in tooltips — they are not accessible on touch devices

Accessibility

  • Radix UI natively implements role="tooltip" and aria-describedby
  • Tooltip auto-shows when the trigger element receives keyboard focus
  • Escape key closes the tooltip