Tooltip

Overview

This documentation provides instructions on how to use the Tooltip component in your React projects. The Tooltip component is part of the abaabil.tooltip library.

import Tooltip from 'abaabil.tooltip';

Key Features

• Customizable trigger button with label
• Support for multiple tooltip positions (top, bottom, left, right)
• Dynamic positioning based on available screen space
• Accessibility features including keyboard navigation and ARIA attributes
• Responsive design with automatic repositioning on window resize and scroll
• Triggered by both hover and focus events for improved accessibility

Usage Example

The Tooltip component can be used to add tooltips to any element in your JSX. Wrap the element you want to add a tooltip to with the Tooltip component and provide the tooltip content.

Positions

The Tooltip component supports four positions: top (default), bottom, left, and right.

Properties

The Tooltip component accepts the following properties:

Accessibility

The Tooltip component is designed with accessibility in mind:

• Uses proper ARIA attributes (aria-describedby) for associating the tooltip with its trigger
• Supports both mouse and keyboard interactions (hover and focus events)
• Implements keyboard navigation support (Escape key to close)
• Uses semantic HTML with appropriate roles (tooltip)

Styling

The Tooltip component uses Tailwind CSS classes for styling:

• Customizable trigger button appearance through buttonClassName prop
• Consistent styling for the tooltip content box
• Smooth opacity transition for showing/hiding the tooltip
• Customizable arrow indicator based on tooltip position

Best Practices

Follow these best practices when using the Tooltip component:

• Use clear and concise labels for the trigger button
• Keep tooltip content brief and focused
• Consider the appropriate position based on the context and available space
• Use tooltips to provide additional context, not for essential information

Dynamic Positioning

The Tooltip component includes dynamic positioning features:

• Automatically adjusts position based on available screen space
• Recalculates position on window resize and scroll events
• Ensures tooltip remains visible within the viewport

Performance Considerations

The Tooltip component is optimized for performance:

• Uses React portals for efficient rendering outside the main DOM hierarchy
• Implements proper cleanup of event listeners
• Utilizes React.useCallback for optimized function references