tooltips-reactjs 🚀

Tooltips-reactjs is an ideal component to display additional information when the user hovers over another element or component. This component has been developed so that it is totally modifiable and can be adapted to the needs of the developer, allowing it to meet the requested requirements. It is a lightweight component and very easy to use.

This displays additional information to users.

Installing 🔧

To install the component use the Node Package Manager (npm). You must open the command console at the root of your project and execute the command:

 npm install tooltips-reactjs --save 

Demo 💻

Click me to go to the demo on codeSandbox!

Usage 🛠️

Here is an example of how to implement the component:

import logo from './logo.svg';
import './App.css';
import TooltipsReactjs  from 'tooltips-reactjs';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Tooltips Component</h1>
        <img src={logo} className="App-logo" alt="logo" />
        <h2>tooltips-reactjs</h2>
         <div className='container'>

          {/* Tooltip Top */}
          <TooltipsReactjs 
            text={<div>Tooltip Top</div>}
            type={'top'}
            background={'#61DAFB'}
            borderRadius={'2%'}
            color={'#000000'}
          >
            <p>Tooltip Top </p>
          </TooltipsReactjs>

          {/* Tooltip Bottom */}
          <TooltipsReactjs 
            text={'Tooltip Bottom'}
            type={'bottom'}
            background={'blue'}
          >
            <p>Tooltip Bottom</p>
          </TooltipsReactjs>

        </div>
        <div className='container'>

          {/* Tooltip Left */}
          <TooltipsReactjs 
            text={'Tooltip Left'}
            type={'left'}
            background={'red'}
          >
            <p>Tooltip Left</p>
          </TooltipsReactjs>

          {/* Tooltip Right */}
          <TooltipsReactjs 
            text={<p>Tooltip Right</p>}
            type={'right'}
            background={'green'}
          >
            <p>Tooltip Right</p>
          </TooltipsReactjs>

        </div>
      </header>
    </div>
  );
}

export default App;

Props of styles 📦

Props for component styles are displayed as a table with Name, Type, Default, and Description as headings.

Required props are marked with *.

| Name | Type | Default | Description | | ------------- | ------ | ---------- | -------------------------------------------------- | | width |string| 150px | Indicates the width of tooltip component. | | height |string| 30px | Indicates the height of tooltip component. | | background |string| #0000005b| Indicates the background of tooltip component. | | fontSize |string| 1rem | Indicates the text size of tooltip component. | | color |string| #fff | Indicates the text color of tooltip component. | | borderRadius|string| 3px | Indicates the border radius of tooltip component. |

Additional usage information 📋

Additional information about using the component pros.

• width: Use this prop to indicate the width of tooltip component. Specify this as a string and in pixel format ("30px") or percentage format ("10%").
• height: Use this prop to indicate the heightof tooltip component. Specify this as a string and in pixel format ("30px") or percentage format ("10%").
• background: Use this prop for indicate the background color of tooltip component. Specify this value as a string, in the format RGB hex ("#AA00FF") or RGB decimal ("rgb (71, 98, 176)") or RGB percentage ("rgb (27%, 38%, 69% ) ") or the name of color ("red").
• fontSize: Use this prop to indicate the size of text for tooltip component. Specify this as a string and in pixel format ("20px") or REM format ("1rem") or EM format ("1em") or the name of size("smaller", "medium", "large", " larger", "x-large", "xx-large").
• color: Use this prop for indicate the text color of tooltip component. Specify this value as a string, in the format RGB hex ("#AA00FF") or RGB decimal ("rgb (71, 98, 176)") or RGB percentage ("rgb (27%, 38%, 69% ) ") or the name of the color ("white").
• borderRadius: Use this prop for indicate the border radius of tooltip component. This value is indicated as a string and percentage format for example: "10%" or "50%".

Props for functionality 📦

Props for component functionality are displayed as a table with Name, Type, Default, and Description as headers.

Required props are marked with *.

| Name | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------------------------------- | | text* | JSX.Element| | Indicates the content that the tooltip component will display.| | type | string | top | Indicates the type of tooltip component. | | offsetY | number | 80 | Indicates the Y-axis offset for tooltip component. | | offsetX | number | 110 | Indicates the X-axis offset for tooltip component. |

Additional usage information 📋

Additional information about using the component pros.

• text: Use this prop to indicate the content that the tooltip component will display. This must be indicated as a string or as an html element.
• type: Use this prop to indicate the type of the tooltip component. This must be given as a string and the supported values are top or bottom or left or right.
• offsetY: Use this prop indicates the Y-axis offset for tooltip component. This must be indicated as a number for example: 10 or 20 or 30.
• offsetX: Use this prop indicates the X-axis offset for tooltip component. This must be indicated as a number for example: 10 or 20 or 30.

Authors ✒️

People who helped build the project from its inception

• Marvin Calvo Acuña - Software Development - marvinjesus
• Marvin Calvo Acuña - Documentation - marvinjesus

License 📄

This project is licensed under the ISC License - see the file LICENSE.md for details.