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:
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 w3wiki</Popover.Header> <Popover.Body> w3wiki 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" }}> { " " } w3wiki </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" >w3wiki</Button> </OverlayTrigger> </div> </div> ); }; export default App; |
Output:
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>w3wiki</Popover.Body> </Popover> ); return ( <div className= "App" > <h1 style={{ color: "green" , textAlign: "center" }}> { " " } w3wiki </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" > w3wiki(right) </Button> </OverlayTrigger> <OverlayTrigger trigger= "hover" placement= "left" overlay={popover} > <Button variant= "success" className= "mx-2" > w3wiki(left) </Button> </OverlayTrigger> <OverlayTrigger trigger= "hover" placement= "top" overlay={popover} > <Button variant= "success" className= "mx-2" > w3wiki(top){ " " } </Button> </OverlayTrigger> <OverlayTrigger trigger= "hover" placement= "bottom" overlay={popover} > <Button variant= "success" className= "mx-2" > w3wiki(bottom) </Button> </OverlayTrigger> </div> </div> ); }; export default App; |
Output:
React-Bootstrap Popover Overlay
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>