How to Position a React-Bootstrap Popover
May 8, 2020 • 9 Minute Read
Introduction
React-Bootstrap provides UI elements, such as forms, inputs, buttons, popovers, tooltips, etc., as React components so that they can be imported and used easily without writing any external JavaScript or JQuery. In this guide, you'll learn how to use a popover component from the React-Bootstrap library and learn to position it on the page.
What Is a Popover?
Before using a UI element, it's important to understand its use cases to ensure that you're using it in the right place. A popover is a view that lasts for only a short time to show content on a page, usually triggered on a click event. Using popovers enhances the visual effect of your content on large screens, and it helps you divide big chunks of content into a more attractive and presentable view.
For instance, while calculating the price of an inventory item in an e-commerce web app, you could use a popover to show the added taxes or shipping charges. In another scenario, you could use a popover to display the details of a new guitar model that your blogging app is marketing.
Popover vs. Tooltip
In terms of design interface, both popovers and tooltips are quite similar. They both show content for a particular element when triggered; however, there are some noticeable differences between the two that demarcate their use cases.
A tooltip is generally triggered when you hover over an element, whereas a popover is triggered on a click. Additionally, tooltips offer short and precise information about an element to help the user understand what the element says. Popovers, on the other hand, are more verbose and contain a great deal of information, like a title and description of content. This is why tooltips usually find their place on icons, unlike popovers, which are used more indiscriminately.
Overlays
In order to use the popover and tooltip components, you also need to know what an overlay is and how to use it. An overlay is a component that sits on top of a popover, controlling its position and visibility. Transitions and toggling of the popover component are handled by the overlay component. It can be imagined as a wrapper ensuring proper functioning of the popover.
Set up a Popover
Start by creating a project. Make sure you have Nodejs and npm installed in your machine (at least version 8 or higher) along with a code editor and a web browser (preferably Chrome or Firefox).
Create a new project using create-react-app:
npx create-react-app react-bootstrap-popover
Install React Bootstrap
First, you should have a bootstrap installed inside your project. To do that, inside the root directory, run the following command to install the React Bootstrap library.
npm install react-bootstrap bootstrap
Clean Up the Template
For brevity, let's put all the code inside App.js. Remove the logo, App.css, and all their imports from App.js. Clean out the starter template inside the app component. Your App.js should look like this:
import React from 'react';
function App() {
return (
<div className="App">
<h2>Hello</h2>
</div>
);
}
export default App;
Add the Popover Component
For regular Bootstrap styles to work correctly, import the Bootstrap styles on top.
import 'bootstrap/dist/css/bootstrap.min.css';
This is equivalent to adding Bootstrap CDN to your index.html file. Now import three things: Popover, OverlayTrigger, and Button from react-bootstrap .
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
To create a popover inside the Popover Component, render the Popover.Title component to indicate the title of the popover and Popover.Content component to indicate its content. Store this popover in a constant variable and output it inside the JSX template.
...
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
...
Output the popover inside an overlay and use the trigger prop to set the type of event to which the overlay listens. The placement prop defines the position of your popover.
....
return (
<div className="App">
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
</div>
);
....
Finally, your App.js should look like this.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
function App() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className="App">
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
</div>
);
}
export default App;
Test the UI
To see the UI inside the root directory, run this code.
npm start
This will spin up a local development server (usually on port 3000), and you can see the popover button and the popover itself when you click on the button. Remember to style the popover button or its container div to display it at the center of the page.
Now that the popover and overlay are ready, youcan position the popover.
Position the Popover Using the Placement Prop
Since the overlay component handles the utility classes of the popover component, a convenient way to set up the popover's position is by playing around with the placement prop. It has been set to right; hence the popover comes to the right of the button. You can set it to any of the four positions: top, left, bottom, and down.
Position the Popover to the Left
Pass in left inside the placement prop to position the popover to the left.
....
<OverlayTrigger trigger="click" placement="left" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
....
Position the Popover at the Top
Pass in top inside the placement prop to position the popover on the top of the button
...
<OverlayTrigger trigger="click" placement="top" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
...
Position the Popover at the Bottom
Pass in bottom inside the placement prop to position the popover on the bottom of the button
...
<OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
...
Position the Popover Using a Custom Component
For precise positions, you can build a custom popover component that calculates its position and then passes that position to the placement prop. The positionLeft and positionTop components can be used to pass the exactly calculated position to the Overlay component.
Create a new component CustomPopover inside the root directory and add the following code:
import React from 'react';
import Popover from 'react-bootstrap/Popover';
import 'bootstrap/dist/css/bootstrap.min.css';
const CustomPopover=({props})=> {
const position=calculatePosition;
const calculatePosition=()=>{
//set position here
}
return (
<Popover {...props} positionLeft={position}>
{props.children }
</Popover>
)
}
export default CustomPopover;
You can use a simple function to calculate the precise position for your popover. Then you can use it inside your Overlay component by only rendering this CustomPopover component as a child.
If you get any depreciated warnings or errors, you can use the exact version of react-bootstrap used in this guide by updating your package.json file and running the command npm i .
....
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.1",
....
Conclusion
Good design has just the right amount of detail and precision. A popover's position should be judged appropriately in terms of the type and length of content it displays. The position of the parent container and the triggering element are defined by the overlay component. If you need a more customized position, revise the design with emphasis on the triggering element, as the popover's position is always relative to its triggering element.
