How to Position a React-Bootstrap Popover

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.

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.

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.

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.

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:

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.

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:

For regular Bootstrap styles to work correctly, import the Bootstrap styles on top.

This is equivalent to adding Bootstrap CDN to your index.html file. Now import three things: Popover, OverlayTrigger, and Button from react-bootstrap .

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.

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.

Finally, your App.js should look like this.

To see the UI inside the root directory, run this code.

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.

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.

Pass in left inside the placement prop to position the popover to the left.

Pass in top inside the placement prop to position the popover on the top of the button

Pass in bottom inside the placement prop to position the popover on the bottom of the button

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:

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 .

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.