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.jsimport 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' }}> w3wiki </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.w3wiki.org/gfg-gg-logo.svg" /> <span className="ms-1"> Hover to see </span> </Button> )} </OverlayTrigger> </div> );}export default TriggerRendererProp; |
Output:
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 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.
Table of Content
- How to Create an Overlay?
- OverlayTrigger Component
- How to Customize trigger behavior
- Overlay with Disabled Elements
Contact Us