React Bootstrap Overlay Component
Last Updated :
23 Jul, 2025
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 uses the style parameter and ref to assist it orient itself for our overlay component. We can utilise the react-bootstrap OverlayTrigger Component in React by using the following method.
How to Create an Overlay?
Overlay and target are the two things that we must have to make an overlay. The element to be positioned is specified by the overlay, and the element related to the overlay is specified by the target. To make the overlay more precise, we may add arrows or other various choices to the injected properties, but these are optional.
Step 1: Import Overlay component
import Overlay from 'react-bootstrap/Overlay
Step 2: Import the OverlayTrigger component
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
Step 3: Import Tooltip component
import Tooltip from 'react-bootstrap/Tooltip'
Step 4: Import the Popover and its sub-components
import Popover from 'react-bootstrap/Popover'
import PopoverBody from 'react-bootstrap/PopoverBody'
import PopoverHeader from 'react-bootstrap/PopoverHeader'
Project Structure:
Example: Implementation to show react bootstrap overlay component.
JavaScript
//App.js
import { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Overlay } from 'react-bootstrap';
function App() {
const [show, setShow] = useState(false);
const target = useRef(null);
return (
<div>
<div style={{
textAlign: 'center', marginTop: '50px'
}}>
<h1 style={{
color: 'green'
}}>
GeeksforGeeks
</h1>
</div>
<div style={{
textAlign: 'center', marginTop: '50px',
position: 'relative'
}}>
<Button variant="danger"
ref={target} onClick={
() => setShow(!show)}>
Click me to see
</Button>
<Overlay target={target.current}
show={show} placement="right">
{({ ...props }) => (
<div
{...props}
style={{
position: 'absolute',
backgroundColor: 'rgba(255, 100, 100, 0.85)',
padding: '10px',
color: 'white',
borderRadius: '8px',
textAlign: 'center',
width: '100px',
top: '50%',
transform: 'translateY(-50%)',
...props.style,
}}>
<h6>React Overlay</h6>
</div>
)}
</Overlay>
</div>
</div>
);
}
export default App;
Output:
OverlayTrigger Component
The OverlayTrigger component in React-Bootstrap simplifies the implementation of overlays by managing their visibility based on user interactions. It provides an easy way to trigger overlays, such as tooltips or popovers, using various events like hover or click, enhancing user experience with minimal code.
Example: Implementation to show the OverlayTrigger Component.
JavaScript
//App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
OverlayTrigger, Tooltip, Button
} from 'react-bootstrap';
function App() {
const renderTooltip = (props) => (
<Tooltip id="button-tooltip" {...props}>
Simple tooltip
</Tooltip>
);
return (
<div style={{
textAlign: 'center', marginTop: '50px'
}}>
<h1>GeeksforGeeks</h1>
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<Button variant="success">
Hover me to see
</Button>
</OverlayTrigger>
</div>
);
}
export default App;
Output
How to Customize trigger behavior
To achieve more advanced interactions, the `<OverlayTrigger>` component allows a function child that provides event handlers corresponding to the specified `trigger` prop and the injected reference. This flexible approach enables the option to programmatically control the overlay's visibility by dividing or manually applying props to any element. The example showcases how to position the overlay relative to an element other than the one triggering its visibility, offering enhanced control over trigger behavior.
Example: Implementation to show how to customize trigger behaviour.
JavaScript
//App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
Tooltip, OverlayTrigger,
Button, Image
} from 'react-bootstrap';
function TriggerRendererProp() {
return (
<div style={{
textAlign: 'center', marginTop: '50px'
}}>
<h1 style={{ color: 'green' }}>
GeeksforGeeks
</h1>
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="button-tooltip-2">
Check out this avatar
</Tooltip>}>
{({ ref, ...triggerHandler }) => (
<Button
variant="light"
{...triggerHandler}
className="d-inline-flex align-items-center">
<Image
ref={ref}
src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" />
<span className="ms-1">
Hover to see
</span>
</Button>
)}
</OverlayTrigger>
</div>
);
}
export default TriggerRendererProp;
Output:
Overlay with Disabled Elements
Tooltips or popovers can also be displayed over items that are disabled. All operations, including hovering and clicking, are prevented when a component has a disabled property specified. Nonetheless, we are still able to provide a tooltip to the user.
Example: Implementation to show overaly with disabled elements .
JavaScript
import Button from 'react-bootstrap/Button';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
function OverlayDisabled() {
return (
<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
<span className="d-inline-block">
<Button disabled style={{ pointerEvents: 'none' }}>
Disabled button
</Button>
</span>
</OverlayTrigger>
);
}
export default OverlayDisabled;
Output:
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsIn React, forms are used to take input from users, like text, numbers, or selections. They work just like HTML forms but are often controlled by React state so you can easily track and update the input values.Example:JavaScriptimport React, { useState } from 'react'; function MyForm() { const [name,
4 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React ComponentsIn React, components are reusable, independent code blocks (A function or a class) that define the structure and behavior of the UI. They accept inputs (props or properties) and return elements that describe what should appear on the screen.Key Concepts of React Components:Each component handles its
4 min read
ReactJS Functional ComponentsIn ReactJS, functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.Example:JavaScriptimport
4 min read
React Class ComponentsClass components are ES6 classes that extend React.Component. They allow state management and lifecycle methods for complex UI logic.Used for stateful components before Hooks.Support lifecycle methods for mounting, updating, and unmounting.The render() method in React class components returns JSX el
3 min read
ReactJS Pure ComponentsReactJS Pure Components are similar to regular class components but with a key optimization. They skip re-renders when the props and state remain the same. While class components are still supported in React, it's generally recommended to use functional components with hooks in new code for better p
4 min read
ReactJS Container and Presentational Pattern in ComponentsIn this article we will categorise the react components in two types depending on the pattern in which they are written in application and will learn briefly about these two categories. We will also discuss about alternatives to this pattern. Presentational and Container ComponentsThe type of compon
2 min read
ReactJS PropTypesIn ReactJS PropTypes are the property that is mainly shared between the parent components to the child components. It is used to solve the type validation problem.Type Safety: When the wrong data type is passed in the component, prototypes help find the issues.Better Debugging: During development, t
5 min read
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects