Tooltip

The Tooltip component provides a clean and accessible way to display additional information when users hover over or focus on elements. It supports various positions, custom styling, and proper accessibility features.

Import

import { Tooltip } from 'h2o-library';

Basic Usage

Basic Tooltip

<Tooltip text="This is a tooltip">
  <div className="text-blue-500 cursor-pointer">Hover me</div>
</Tooltip>

Tooltip Positions

<div className="flex gap-4">
  <Tooltip text="This is a tooltip from the top" position="top">
    <div className="text-blue-500 cursor-pointer">Top</div>
  </Tooltip>
  <Tooltip text="This is a tooltip from the right" position="right">
    <div className="text-blue-500 cursor-pointer">Right</div>
  </Tooltip>
  <Tooltip text="This is a tooltip from the bottom" position="bottom">
    <div className="text-blue-500 cursor-pointer">Bottom</div>
  </Tooltip>
  <Tooltip text="This is a tooltip from the left" position="left">
    <div className="text-blue-500 cursor-pointer">Left</div>
  </Tooltip>
</div>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
text	string	-	The tooltip text to display
position	"top" | "right" | "bottom" | "left"	"top"	Position of the tooltip
className	string	-	Additional CSS classes
children	React.ReactNode	-	The element that triggers the tooltip

Design Considerations

• Clear visual appearance
• Proper positioning
• Smooth transitions
• Support for long text
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Tooltip alignment
• Support for different contexts
• Proper spacing
• Consistent styling

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Keyboard navigation
• Focus management
• Color contrast
• Text alternatives
• State announcements
• Error handling
• Focus restoration
• Touch device support
• Screen reader announcements