Tooltip

The Tooltip component is a reusable React component that displays a small tooltip when hovering over a specific element. It is inspired by the Material UI design and written in TypeScript for better type safety and maintainability.

Features

• Clean and modern design inspired by Material UI
• Customizable tooltip placement (top, bottom, left, right)
• Customizable tooltip appearance (background color, text color, font size)
• TypeScript support for type safety
• Responsive and accessible

Installation

To use the Tooltip component in your React application, install it via npm:

npm install @droid-tech/react-ts-tooltip

Usage

To use the Tooltip component, simply import it and pass the element you want to display the tooltip for as the content prop:

import {Tooltip} from "@droid-tech/react-ts-tooltip";

<Tooltip title="This is a tooltip" content={<span>Hover over me</span>} />;

The title prop is required and accepts a string, a ReactNode, or a React element that will be displayed as the tooltip content.

Props

The Tooltip component accepts the following props:

| Prop | Type | Default | Description | | ----------------- | ---------------------------------------- | -------- | ----------------------------------------------------------- | | title | ReactNode | - | The content to be displayed in the tooltip | | content | ReactElement | - | The React element that triggers the tooltip | | placement | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | The position of the tooltip relative to the trigger element | | backgroundColor | string | '#333' | The background color of the tooltip | | textColor | string | '#fff' | The text color of the tooltip | | fontSize | string | '14px' | The font size of the tooltip text |

Conclusion

The Tooltip component provides a clean and modern way to display tooltips in your React application. With its customizable appearance and TypeScript support, it can easily be integrated into your project and styled to match your design requirements.