My React Tooltip

My React Tooltip is a versatile and customizable tooltip React component for enhancing your web applications with interactive tooltips. It provides a user-friendly and highly customizable way to add tooltips to your UI elements.

Features

• Easy Integration: Seamlessly integrate tooltips into your React applications.
• Customizable Styles: Tailor the tooltip appearance with custom text and background colors.
• Flexible Dimensions: Set the height, width, and border radius of the tooltip box as per your design.
• Font Size Control: Adjust the font size of the tooltip text for better visibility.
• Lightweight: Minimal dependencies, with React as the primary requirement.

Installation

You can install the my-react-tooltip package via npm:

npm install my-react-tooltip

Usage

Follow these steps to use the Tooltip component in your application:

1. Import the Tooltip Component

   Import the Tooltip component into your React component file:

   import Tooltip from "my-react-tooltip";
   import "my-react-tooltip/dist/Tooltip.css"; // Include the CSS if it's kept separately

2. Implement the Tooltip

   Wrap any element with the Tooltip component to add a tooltip to it:

   <Tooltip text="Tooltip text here" textColor="#fff" bgColor="#30263e">
     <button>Hover Over Me</button>
   </Tooltip>

   This will display a tooltip with the specified text when the user hovers over the button.

Customization Options

The following props can be used to customize the Tooltip component:

• text (string): The text displayed inside the tooltip. This prop is required.
• textColor (string): The color of the tooltip text. Defaults to white (#fff).
• bgColor (string): The background color of the tooltip. Defaults to #30263e.
• height (string): The height of the tooltip box. Defaults to "auto".
• width (string): The width of the tooltip box. Defaults to "auto".
• borderRadius (string): The border radius of the tooltip box. Defaults to "5px".
• fontSize (string): The font size of the tooltip text. Defaults to "14px".

Example

Here's a complete example demonstrating the usage of the Tooltip component:

import React from "react";
import Tooltip from "my-react-tooltip";
import "my-react-tooltip/dist/Tooltip.css";

const App = () => {
  return (
    <div>
      <Tooltip
        text="Customized tooltip"
        textColor="black"
        bgColor="lightgray"
        height="40px"
        width="120px"
        borderRadius="10px"
        fontSize="16px"
      >
        <button>Hover Over Me</button>
      </Tooltip>
    </div>
  );
};

export default App;

Contributing

Contributions to enhance my-react-tooltip are welcome. You can fork the repository and submit pull requests to make it even better.

License

my-react-tooltip is open-source software released under the MIT license.

Changelog

Version 1.0.5

• Added support for resizing text

Version 1.0.4

• Added support for customizing the height, width, border radius, and font size of the tooltip box.