React-Bootstrap OverlayTrigger Component

Last Updated : 07 Mar, 2024

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 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
```

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> 
  ); 
}