How to Use React-Bootstrap's Popover

May 7, 2020 • 6 Minute Read

Introduction

A popover is a pop-up box that appears when a user clicks on a specific HTML element. It’s pretty similar to the tooltip element, and it's used for showing static information to a user. Still, the difference between tooltip and a popover is that the popover shows meaningful content along with the title, whereas tooltip includes only text without a title.

In this guide, you'll learn how to install Bootstrap in your React application and integrate the popover component with the element.

Installing Bootstrap in React

To use Bootstrap in a React app, use the reactstrap library available in React.

Reactstrap is a library that has various components of Bootstrap specifically designed and developed for React apps. Below are a few components of reactstrap.

Card
Form
Alert
Carousel
Layout
Pagination
Popovers
Tables
Modals

By using those components from reactstrap, you can integrate and implement various elements of Bootstrap.

Before using any reactstrap components, install its official library using the npm command, as shown below:

      npm install reactstrapnpm 
install bootstrap
    

After installing the package, the next step is to add bootstrap CSS into the root component because reactstrap does not have its CSS configuration.

Add the statement below into the index.js file of your React app.

      import 'bootstrap/dist/css/bootstrap.min.css';

Now the application is ready for integrating the reactstrap components.

Properties of Reactstrap Popover

Before using the reactstrap popover, know which properties need to be implemented for the popover component in the React app.

A few properties of the popover that you should be aware of while integrating it into the React component are:

isOpen: This property determines whether the popover is visible or not, and it is the most required property for the popovers.
Target: Target uses the target property to specify a specifically targeted element on which the user triggers an action and a popover appears.
Toggle: Toggle is used to hide and show the popover by using the function attached to the props. This function will toggle the current mode of isOpen, i.e., true/false, using the state values.
Placement: This property is used to define the location of the popover. There are four options available: left, right, top, and bottom. These are fundamental properties for integrating popovers into a React app and making it functional.

Integrating Reactstrap Popover

Now that you have a basic idea of reactstrap popover, let's implement it in some real-life examples.

In the example below, you can see there is a single button along with the id.

      <Button id="mypopover" type="button">  
    Click to Launch Popover
</Button>```

It is a simple button control along with the added property `id`; this is important to specify because soon you'll use the targeted element for the popover.

The next step is to implement popover control in the same scope as the button control, as shown below:


```jsx
<Popover  
    placement="bottom"  
    isOpen={popoverOpen}  
    target="mypopover"  
    toggle={this.togglePopover}
>  
    <PopoverHeader>This is popover title</PopoverHeader> 
    <PopoverBody>    
         This is simple popover content  
    </PopoverBody>
</Popover>
    

In the above example, three HTML tags are used:

Popover: This is a leading container for the popover control, and inside the container, you can specify the different elements or texts.
PopoverHeader: This is used to determine the header of the popover control.
PopoverBody: This is used to specify the body content of the popover control.

Along with these tags, four different properties are used: isOpen, toggle, target, and placement, which are mentioned above.

Here is the complete example of the reactstrap popover:

      import React, { Component } from "react";
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

class SimplePopover extends Component {
  constructor() {    
    super();    
    this.state = {      
      name: "React",      
      popoverOpen: false    
    };
    this.togglePopover = this.togglePopover.bind(this);

  }


togglePopover() {    
  this.setState({ popoverOpen: !this.state.popoverOpen })  
}

render() {
    const { popoverOpen } = this.state;

    return (
      <div>
        <Button id="mypopover" type="button">
          Click to Launch Popover
        </Button>
        <Popover
          placement="bottom"
          isOpen={popoverOpen}
          target="mypopover"
          toggle={this.togglePopover}
        >
          <PopoverHeader>This is popover title</PopoverHeader>
          <PopoverBody>
            This is simple popover content
          </PopoverBody>
        </Popover>
      </div>
    );
  }
}

export default SimplePopover;
    

When you click the button, a popover appears based on the property value placement.

When a user clicks on the button, the Boolean value changes for popoverOpen using the below function.

      togglePopover() {
    this.setState({ popoverOpen: !this.state.popoverOpen })}
    

On every button clicked, the state value updates and the popover component behaves based on the property isOpen.

      isOpen={popoverOpen}

The isOpen property works with true/false values, so once it gets the value, the popover component will be hidden or visible based on the user's action.

Other Third-party Libraries

In this guide, you have used reactstrap, but there are tons of libraries available that provide various components, including popover.

Material-UI
Mdbootstrap
react-bootstrap
rsuitejs
react-popover
react-tiny
popover

Conclusion

Reactstrap is a popular choice for using Bootstrap with React. One of the basic controls is popover, which we can use to show static information along with a title.

A popover is one way to show the information to users using HTML control around a specifically targeted element. I hope this guide will help you integrate Bootstrap into your React app.