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.
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();
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;
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:
You might also like:
In this article, we will see how to remove a specific item from an array in javascript. We will use the indexOf() m...
Nov-03-2022
In this article, we will see the laravel 10 ajax crud operations example. Here, we will learn about ajax crud operation...
Feb-27-2023
In this article, we will see how file uploads in react js. File uploading means a user from a client machine wants...
Sep-05-2022
In this article, we will see how to integrate the stripe payment gateway in laravel 9. stripe payment gateway is in...
Apr-10-2022