React tooltip and popover tutorial; This guide will show you how to take pragmatic approach to implement overlay popover and tooltip in React js application using notable React Bootstrap library.
The tooltip is the primary graphical user interface element, a small box containing some message or information. It mainly surfaces when users hover over certain user-interface elements ( icon, image, hyperlink, or another GUI element).
Tooltip stays stagnant as long as the cursor is positioned over the ui element; we will show how to implement tooltip in react app using the react-bootstrap package.
Popover are the more advanced version of the tooltip. Apparently, the tooltip and popover look almost identical; unlike the tooltip, you can customize the popover more easily based on your needs.
You can add more information in popovers using the custom HTML and display it to users. React bootstrap doesn’t lack features; rather, it offers tons of customization properties. For example, you can change the popover’s position and set various event handlers (click, focus, hover) to manage the overlay popovers.
React Bootstrap Tooltip and Popover Customization Example
- Step 1: Download React Project
- Step 2: Add React Bootstrap Library in React
- Step 3: Import React Bootstrap Packages
- Step 4: React Bootstrap Tooltip Example
- Step 5: Change Tooltip Position
- Step 6: Implement Bootstrap Popover in React
- Step 7: Start React Application
Download React Project
Move to the command prompt, type the provided command to install the new react application. If you are not new to react development, then you probably aware of this process you can ignore this step.
npx create-react-app react-demo
Add React Bootstrap Library in React
After installing the application, make sure to step into the react project using the cd your-project-name command. After that, use the following command to install bootstrap and react-bootstrap libraries in the react app.
npm install react-bootstrap bootstrap
Import React Bootstrap Tooltips, Overlay Packages
React Bootstrap is accessible only after importing its component’s packages; you have to add Tooltip, Overlay, OverlayTrigger, and Button modules to create tooltip and popover.
Update code in src/App.js file.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tooltip, Overlay, OverlayTrigger, Button } from 'react-bootstrap';
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
React Bootstrap Tooltip Example
The easy way to build a tooltip is by using the overlay component, use react-bootstrap tooltip packages to form the tooltip, you can add the onClick event handler to call the displayTooltip() method on click.
import React, { useRef, useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tooltip, Overlay, Button } from 'react-bootstrap';
import './App.css';
function App() {
const [tooltip, displayTooltip] = useState(false);
const elementTarget = useRef(null);
return (
<div className="App mt-5">
<Button ref={elementTarget} onClick={() => displayTooltip(!tooltip)} variant="primary" >
Show Tooltip
</Button>
<Overlay elementTarget={elementTarget.current} show={tooltip} placement="top">
{(props) => (
<Tooltip {...props}>
Lorem Ipsum is simply dummy text of the printing industry.
</Tooltip>
)}
</Overlay>
</div >
);
}
export default App;
Switch Tooltip Position
To change the tooltip position, define the OverlayTrigger followed by placement property. It offers four types of position properties such as top, bottom, left, and right for displaying the tooltip.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tooltip, OverlayTrigger, Button } from 'react-bootstrap';
import './App.css';
function App() {
return (
<div className="App mt-5">
<OverlayTrigger
placement={'top'}
overlay={
<Tooltip>
Tooltip Top
</Tooltip>
}>
<Button variant="success">Tooltip Top</Button>
</OverlayTrigger>
<OverlayTrigger
placement={'bottom'}
overlay={
<Tooltip>
Tooltip Bottom
</Tooltip>
}>
<Button variant="danger">Tooltip Bottom</Button>
</OverlayTrigger>
<OverlayTrigger
placement={'right'}
overlay={
<Tooltip>
Tooltip Right
</Tooltip>
}>
<Button variant="primary">Tooltip Right</Button>
</OverlayTrigger>
<OverlayTrigger
placement={'left'}
overlay={
<Tooltip>
Tooltip Left
</Tooltip>
}>
<Button variant="danger">Tooltip Left</Button>
</OverlayTrigger>
</div >
);
}
export default App;
Implement Bootstrap Popover in React
Implementing popover in react requires importing OverlayTrigger, Popover, and a button; overlay also allows adding HTML content. We also defined the dynamic overlay popover positions to show you the brief idea of how easy it is to customize the popovers.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { OverlayTrigger, Popover, Button } from 'react-bootstrap';
import './App.css';
function App() {
return (
<div className="App mt-5">
<>
{['top', 'right', 'bottom', 'left'].map((placement) => (
<OverlayTrigger
trigger="hover"
key={placement}
placement={placement}
overlay={
<Popover id={`popover-positioned-${placement}`}>
<Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
<Popover.Content>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing industry.
</Popover.Content>
</Popover>
}>
<Button variant="secondary">{placement} Popover</Button>
</OverlayTrigger>
))}
</>
</div>
);
}
export default App;
Start React Application
Next, run the following command to start the react application server, use the displayed url on the terminal to test the tooltip component.
npm start
Conclusion
All the good things come to an end; likewise, we have completed this React Bootstrap tooltip and popover tutorial; In this tutorial, we learned how to create tooltips, overlay popover component, and step by step answered how to integrate tooltips in react, how to add popovers in react and how to customize tooltip and popover in react using react-bootstrap methods.