<button class="button"
				data-tooltip="Help text here"
				aria-label="Button description">
				Button Label
				</button>

				<!-- Position variants -->
				<button class="button"
				data-tooltip="Right tooltip"
				data-position="right">
				Right
				</button>

				<button class="button"
				data-tooltip="Bottom tooltip"
				data-position="bottom">
				Bottom
				</button>

				<button class="button"
				data-tooltip="Left tooltip"
				data-position="left">
				Left
				</button>

• `data-tooltip="text"` - Tooltip text to display
• `data-position="top|right|bottom|left"` - Tooltip position (default: top)

• `aria-label` - Describes button purpose to screen readers
• Tooltip text - Included in `data-tooltip` attribute and announced on focus

• CSS Pseudo-Elements - No DOM elements needed for tooltip
• Hover Trigger - Show on mouse over
• Focus Trigger - Show on keyboard focus
• Multiple Positions - Top, right, bottom, left via data-position
• Arrow Pointer - Visual connection using ::before pseudo-element
• Smooth Animation - Fade transition on show/hide
• High Contrast - Dark text on light background for readability

• Help Text - Explain button functionality
• Keyboard Shortcuts - Show shortcut keys (e.g., "Ctrl+S")
• Icon Clarification - Explain icon button meaning
• Abbreviations - Expand shortened text or acronyms
• Hints - Contextual guidance for actions
• Status Info - Additional context or warnings

• Keyboard Support - Tooltip shows on focus, not just hover
• aria-label - Always include aria-label on button
• High Contrast - WCAG AA compliant colors (dark text on light)
• Non-Essential - Tooltip content should supplement, not replace main content
• Screen Readers - Content read from data-tooltip attribute

Mobile (< 768px)

On mobile, tooltips display safely:

• Positioned to avoid viewport edges
• Tap to show/hide
• Not dependent on hover
• Readable font size maintained

Desktop (1024px+)

Desktop uses hover for tooltip display:

• Hover to show tooltip
• Smart positioning (top/bottom/left/right)
• Smooth fade transitions
• Arrow pointing to trigger element

Framework Integration

• Framework detects available space
• Auto-positions to avoid overflow
• Touch-friendly on mobile
• Keyboard accessible

• Concise Text - Keep tooltips brief (1-2 lines max)
• Clear Language - Avoid jargon and technical terms
• Smart Positioning - Avoid edge tooltips that go off-screen
• Show on Focus - Works for keyboard users too
• No Essential Info - Users should not need tooltip to understand interface
• Icon Buttons - Essential for icon-only buttons
• Avoid Long Hover - Don't require long hover time to appear

• Semantic Structure - Built with native HTML5 elements for maximum reliability.
• Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
• Fully Responsive - Scales perfectly from mobile to desktop screens.
• No JS Dependency - Core functionality relies on pure CSS for maximum performance.
• Customizable - Easily extendable via Axiom01's design tokens and modifiers.