Tooltip

A lightweight and customizable tooltip component that provides additional information on hover.

The Tooltip component is a flexible and accessible way to display contextual information when users hover over an element.

Installation

npx pixelblock-cli add Tooltip

This will copy the Tooltip.tsx file to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Tooltip.tsx
└── ...

Usage

After installing the Tooltip component, you can use it in your React application.

Basic Example

Custom Positions

Props

Prop	Type	Default	Description
children	ReactNode	-	The element that triggers the tooltip.
content	ReactNode	-	The tooltip content.
delay	number	0	Delay in milliseconds before showing tooltip.
defaultPosition	"top" | "bottom" | "left" | "right"	"top"	The default position of the tooltip.
bgClass	string	"bg-black text-white"	Custom classes for tooltip background.
arrowClass	string	"bg-black"	Custom classes for the tooltip arrow.

Accessibility Features

• Ensures proper ARIA attributes for better screen reader support.
• Provides keyboard accessibility for users who navigate with a keyboard.
• Tooltip dismisses when clicking outside or pressing Esc.

Development Considerations

1. The tooltip dynamically positions itself based on the available screen space.
2. Users can customize the appearance using bgClass and arrowClass props.
3. Supports various positions (top, bottom, left, right) to suit different UI needs.

This tooltip component is an easy way to enhance user interactions by providing additional contextual information in an accessible manner.