Open In App

React-Bootstrap Popover Overlay

Last Updated : 20 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The React bootstrap provides us with the bootstrap components out of the box compared to normal React. It comes with the pre-applied CSS and the themes and properties of the bootstrap component can be modified by changing the properties. The Dropdown component is used for showing dropdowns in React Bootstrap. The overlay component in React-Bootstrap adds extra beauty to the Tool Tips by controlling the position and visibility. It supports transitions to create better UX and visibility toggling.

In this article, we will see React-Bootstrap Popover Overlay. The popover overlay is like a tooltip that pops up over the parent component to give some information regarding it. We can specify the overlay property in the OverlayTrigger component as popover and then popover appears as an Overlay.

Syntax:

<OverlayTrigger trigger="triggerType" placement="value" overlay={popover}>
      <Button >....</Button>
</OverlayTrigger>

Steps to create a React App and Installing required modules:

Step 1: Create a react application by running the below command:

npx create-react-app AppName

Step 2: Once it is done change your directory to the newly created application using the following command:

cd AppName

Step 3: Install React Bootstrap dependency:

npm install react-bootstrap bootstrap

Step 4: Or Add these cdn links in the index.html

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
             crossorigin>
</script>
<script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
              crossorigin>
</script>

Step 5: Start the application

npm start

Project structure:

Screenshot-2023-10-12-185538

Example 1: In this example, we are creating a basic popover display in App.js file

Javascript




import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
 
const App = () => {
    const popover = (
        <Popover>
            <Popover.Header as="h3"> About GeeksforGeeks</Popover.Header>
            <Popover.Body>
                GeeksforGeeks is a leading platform that provides computer
                science resources and coding challenges for programmers and
                technology enthusiasts, along with interview and exam
                preparations for upcoming aspirants.
            </Popover.Body>
        </Popover>
    );
 
    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                React-Bootstrap Popover Overlay
            </h5>
            <br></br>
            <br></br>
            <div style={{ textAlign: "center" }}>
                <OverlayTrigger
                    trigger="click"
                    placement="right"
                    overlay={popover}
                >
                    <Button variant="success">GeeksforGeeks</Button>
                </OverlayTrigger>
            </div>
        </div>
    );
};
 
export default App;


Output:

20231015180106

Example 2: In this example, we are using hover triggerType and position of popover using placement property in the App.js file

Javascript




import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
 
const App = () => {
    const popover = (
        <Popover>
            <Popover.Body>GeeksforGeeks</Popover.Body>
        </Popover>
    );
 
    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                React-Bootstrap Popover Overlay
            </h5>
            <br></br>
            <br></br>
            <div style={{ textAlign: "center" }}>
                <OverlayTrigger
                    trigger="hover"
                    placement="right"
                    overlay={popover}
                >
                    <Button variant="success" className="mx-2">
                        GeeksforGeeks(right)
                    </Button>
                </OverlayTrigger>
                <OverlayTrigger
                    trigger="hover"
                    placement="left"
                    overlay={popover}
                >
                    <Button variant="success" className="mx-2">
                        GeeksforGeeks(left)
                    </Button>
                </OverlayTrigger>
                <OverlayTrigger
                    trigger="hover"
                    placement="top"
                    overlay={popover}
                >
                    <Button variant="success" className="mx-2">
                        GeeksforGeeks(top){" "}
                    </Button>
                </OverlayTrigger>
                <OverlayTrigger
                    trigger="hover"
                    placement="bottom"
                    overlay={popover}
                >
                    <Button variant="success" className="mx-2">
                        GeeksforGeeks(bottom)
                    </Button>
                </OverlayTrigger>
            </div>
        </div>
    );
};
 
export default App;


Output:
20231015175414



Similar Reads

React Suite Popover &lt;Popover&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. To display content specific to a certain topic only when the user performs a certain action Popover comes in handy. Popover Component allows the user to show the popup information that is triggered on some event
3 min read
Chakra UI Overlay Popover
Chakra UI Overaly Popover component creates an interactive and visually appealing pop-up overlay in the React application. We can embed the components in realtime usage like basic conformations, customized content, lazy-loaded components, controlled popovers, etc. In this article, we will create the practical implementation of the Chakra UI Overlay
3 min read
React Bootstrap Overlay Component
React Bootstrap provides various components for placing stunning overlays, tooltips, popovers, and other elements. The overlay is mostly used to arrange tooltips and popovers and adjust their display. It serves as a wrapper for toggle and transition functions. Common use cases for our Overlay components are aided by the OverlayTrigger Component. It
4 min read
How to Dismiss a React-Bootstrap Popover on Click Outside ?
This article implements popover functionality using the React Bootstrap library. It consists of a button labelled "Show Popover," and when this button is clicked, a popover with the title "Popover Right" and the content "Some Amazing Content" is displayed to the right of the button. The popover is shown or hidden based on the state of the "showPopo
3 min read
React-Bootstrap Popover Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Popover Component is a container-type element that hovers over the parent window. It is just like popup information that is trigger on some event over the parent window. We can use the following approach in ReactJS to use the react-bootstrap Popover Component. Popover
2 min read
How to use links on card-img-overlay class in Bootstrap 4 ?
When we put any link inside of a bootstrap card it performs well until we used card-img-overlay to put an image as a background of that card. Bootstrap Card: A card in BootStrap 4 is a flexible and extensible content container. It includes options for headers, footers, content, colors, links etc. Card Image Overlays: card-img-overlay is used to set
3 min read
How to use image overlay correctly with Bootstrap ?
In this article, we will be learning how to use image overlay correctly with Bootstrap. But before that, first, we need to know what is an Image Overlay. Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be done using the ‘card-img-overlay’ property that i
2 min read
How to Create Image Overlay Effects in Bootstrap ?
We will discuss how can we create an image Overlay effect using Bootstrap. we will use the Bootstrap component to build this. For using the Bootstrap component we need to first add CDN link into our file then we will start to customize our component. ApproachIn this approach, we are using Bootstrap's "Card Image overlays" component to structure con
1 min read
Bootstrap 4 | Popover
The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element.The data-toggle = "popover" attribute is used to create popover, title="popover-title" attribute is used to add
3 min read
How to make Bootstrap popover appear/disappear on hover instead of click?
Bootstrap provides in-built support for making popovers. A popover is a content box that appears when a user triggers a specific event with specified element selector. Here, we will discuss methods to trigger popover using "hover" instead of "click". Method 1: Here, we will specify popover trigger in 'hover' using jQuery initialization only. We can
2 min read