How To Add Tooltip In React JS

Websolutionstuff | Sep-12-2022 | Categories : Bootstrap React JS

In this article, we will see how to add a tooltip in react js. Tooltips display informative text when users hover over, focus on, or tap an element. Bootstrap for React has this component available for us, and it is very easy to integrate. We can use the Tooltip Component in ReactJS.

So, let's see how to use the tooltip in react js, react tooltip on hover, and create the tooltip component react.

For the bootstrap tooltip example, we will install react-bootstrap using the npm and use the tooltip component to create a tooltip in the react js application.

Install react-bootstrap

In this step, we will install bootstrap using the npm. So, let's follow the below command and install bootstrap.

npm install react-bootstrap bootstrap

After successfully installing bootstrap, we need to import bootstrap CSS in the src/index.js file.

 src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

 

Bootstrap Tooltip on Hover

In this example, we will see on hover display tooltip. So, add the below code in the app.js file. Also, import the Button, Tooltip, and OverlayTrigger from the react-bootstrap library.

src/App.js

import React, {useState} from 'react';
import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
import "./styles.css";

function App() {
  function renderTooltip(props) {
    return (
      <Tooltip id="button-tooltip" {...props}>
        Tooltip Example
      </Tooltip>
    );
  }
    
  return (
    <div className="container">
        <h2>How To Add Tooltip In React JS - Websolutionstuff</h2>
  
        <OverlayTrigger
          placement="top"
          delay={{ show: 250, hide: 400 }}
          overlay={renderTooltip}
        >
          <Button variant="success">Hover Me!</Button>
        </OverlayTrigger>
   
    </div>
  );
}
   
export default App;

 

 

Bootstrap Tooltip on Click

In this example, we will see on click display tooltip. Also, we will import Button, Tooltip, and Overlay from the react-bootstrap library.

src/App.js

import React, {useState, useRef} from 'react';
import { Button, Tooltip, Overlay } from 'react-bootstrap';
import "./styles.css";

function App() {
  const [show, setShow] = useState(false);
  const target = useRef(null);
    
  return (
    <div className="container">
        <h2>How To Add Tooltip In React JS - Websolutionstuff</h2>
  
        <Button ref={target} onClick={() => setShow(!show)}>
          Click Me!
        </Button>
        <Overlay target={target.current} show={show} placement="right">
          {(props) => (
            <Tooltip id="overlay-example" {...props}>
              Tooltip Example
            </Tooltip>
          )}
        </Overlay>
   
    </div>
  );
}
   
export default App;

Output:

how_to_add_tooltip_in_react_js_output

 


You might also like:

Recommended Post
Featured Post
How To Generate QR Code Using Javascript
How To Generate QR Code Using...

In this tutorial we will see how to generate QR code using javascript. we will implement QR code generator without...

Read More

Jul-19-2021

How To Create Dynamic Pie Chart In Laravel 9
How To Create Dynamic Pie Char...

In this article, we will see how to create a dynamic pie chart in laravel 9. Pie charts are used to repre...

Read More

Mar-20-2022

Laravel 9 Barcode Generator Example
Laravel 9 Barcode Generator Ex...

In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...

Read More

Mar-26-2022

How to Install PHP JSON Extension in Ubuntu 23.04
How to Install PHP JSON Extens...

Hey there! If you're working with PHP on Ubuntu 23.04 and find yourself needing JSON support, you're in the righ...

Read More

Feb-05-2024