How To Use Tooltip In ReactJS

In this article, we will learn how to use tooltip in react.

–First of all, create react project and then add a tooltip module.

• npm install react-tooltip

–Now open your app.js file and add the below imports there.

import ReactTooltip from 'react-tooltip';

–Tooltip code:

<a data-tip> Tooltip</a>
<ReactTooltip type='dark'>
<span>Hello</span>
</ReactTooltip>

-You can add a tooltip on the top, bottom, left and right sides using place option.

-Here is code:

<div className='container'>
      <div className='tooltip'>
        <div>
          <a data-tip data-for='topside'> Top</a>
          <ReactTooltip id='topside' type='dark' place="top">
            <span>Top Tooltip</span>
          </ReactTooltip>
        </div>
        <div>
          <a data-tip data-for='bottomside'>Bottom </a>
          <ReactTooltip id='bottomside' type='dark' place="bottom">
            <span>Bottom Tooltip</span>
          </ReactTooltip>
        </div>
        <div>
          <a data-tip data-for='rightside'>Right </a>
          <ReactTooltip id='rightside' type='dark' place="right">
            <span>Right Tooltip</span>
          </ReactTooltip>
        </div>
        <div>
          <a data-tip data-for='leftside'>Left </a>
          <ReactTooltip id='leftside' type='dark' place="left">
            <span>Left Tooltip</span>
          </ReactTooltip>
        </div>
     </div>
  </div>

output:

— You can add a tooltip type like success, dark, warning, error, info, light.
–default tooltip type is dark.

-Here is code:

<div className='container'>
        <div className='tooltip'>
          <div>
            <a data-tip data-for='success'>Success</a>
            <ReactTooltip id='success' type='success' place="top">
              <span>Success</span>
            </ReactTooltip>
          </div>
          <div>
            <a data-tip data-for='warning'>Warning </a>
            <ReactTooltip id='warning' type='warning' place="bottom">
              <span>Warning</span>
            </ReactTooltip>
          </div>
          <div>
            <a data-tip data-for='error'>Error </a>
            <ReactTooltip id='error' type='error' place="top">
              <span>Error</span>
            </ReactTooltip>
          </div>
          <div>
            <a data-tip data-for='info'>Info </a>
            <ReactTooltip id='info' type='info' place="bottom">
              <span>Info Tooltip</span>
            </ReactTooltip>
          </div>
          <div>
            <a data-tip data-for='light'>Light </a>
            <ReactTooltip id='light' type='light' place="top">
              <span>light Tooltip</span>
            </ReactTooltip>
          </div>
        </div>
 </div>

Output: