React-Bootstrap OverlayTrigger Component - GeeksforGeeks

04 May, 2021
React-Bootstrap is a front-end framework that was designed keeping react in mind. OverlayTrigger Component helps with common use-cases into our Overlay components. It positions itself with the help of ref and style prop for our overlay component. We can use the following approach in ReactJS to use the react-bootstrap OverlayTrigger Component.
OverlayTrigger Props:
children: It is used to indicate the children’s attribute for an overlay.
defaultShow: It is used to indicate the initial visible state of an overlay.
delay: It is used to indicate delay time for an overlay to show and hide once it is triggered.
flip: It is used to indicate the initial flip state of an overlay.
onHide: It is used to indicate the on hiding property of an overlay.
onToggle: It is a callback function that is triggered when the user changes the visibility of tooltip.
overlay: It is text to or an element overlay that is next to the target.
placement: It is used to set the positioned direction of the overlay.
popperConfig: It is a config object of Popper.js which is passed to the underlying instance of popper.
show: It indicates the visibility of the overlay.
target: It is the target attribute used when a target needs to be set for an overlay.
trigger: It is used to specify which actions trigger action or overlay visibility.
Overlay Props:
children: It is used to indicate the children’s attribute for an overlay.
container: It is basically a component instance or a function that returns either or a DOM node.
onEnter: It is a callback function that is triggered before overlay transitions in.
onEntered: It is a callback function that is triggered after overlay finishes transitioning in.
onEntering: It is a callback function that is triggered as overlay begins to transition in.
onExit: It is a callback function that is triggered right before overlay transitions out.
onExited: It is a callback function that is triggered after overlay finishes transitioning out.
onExiting: It is a callback function that is triggered as overlay begins to transition out.
onHide: It is used to indicate the on hiding property of an overlay.
placement: It is used to set the positioned direction of the overlay.
popperConfig: It is a config object of Popper.js which is passed to the underlying instance of popper.
rootClose: It is used to specify whether to call the onHide function when the user clicks outside the overlay.
rootCloseEvent: It is used to close the component when an event is fired outside it.
show: It indicates the visibility of the overlay.
target: It is the target attribute used when a target needs to be set for an overlay.
transition: It is used for the animation of the entering and exiting of the Overlay.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install react-bootstrap 
npm install bootstrap
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap 
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import OverlayTrigger from 'react-bootstrap/OverlayTrigger';import Popover from 'react-bootstrap/Popover'import Button from 'react-bootstrap/Button';  export default function App() {  return (    <div style={{ display: 'block', width: 700, padding: 30 }}>      <h4>React-Bootstrap OverlayTrigger Component</h4>      <OverlayTrigger        placement="bottom"        trigger="click"        overlay={(          <Popover>            <Popover.Title as="h3">             Hello User            </Popover.Title>          </Popover>        )}>        <Button variant="primary">             OverlayTrigger Button        </Button>      </OverlayTrigger>    </div>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://react-bootstrap.github.io/components/overlays/#overlay-trigger-props
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
Axios in React: A Guide for Beginners
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript