@droid-tech/react-ts-tooltip

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.