Components
Tooltip
A fully customizable, accessible tooltip component with support for various placements, offsets, and styles.
Previews with Code
Example 1: Default Tooltip Example
Example 2: Tooltip Placements
Example 3: Styled Tooltip Example
Installation
The Tooltip component provides a simple, accessible, and customizable tooltip solution.
Quickly add the component using:
File Structure
tooltip.tsx
Props
The Tooltip component comes with the following props for customization:
TooltipContent Props
| Prop | Type | Default |
|---|---|---|
sideOffset | number | 4 |
side | "top" | "bottom" | "left" | "right" | "top" |
className | string | - |
Features
- Customizable Placement:
- Supports
top,bottom,left, andrightplacements.
- Supports
- Side Offset:
- Configure the distance between the tooltip and its trigger.
- Styled Tooltips:
- Add custom classes to style tooltips for specific use cases.
- Interactive Tooltips:
- Tooltips can include interactive elements like buttons.
Accessibility
The Tooltip component is built with Radix primitives, ensuring compliance with accessibility standards. Ensure the tooltip content is meaningful for screen readers.
Conclusion
The Tooltip component is a highly flexible and accessible solution for creating informative, styled, and interactive tooltips in your application.