Overlays

Overlay is the fundamental component for positioning and controlling tooltip visibility. It's a wrapper around Popper.js, that adds support for transitions, and visibility toggling.

Basic

Overlays consist of at least two elements, the "overlay", the element to be positioned, as well as a "target", the element the overlay is positioned in relation to. You can also also have an "arrow" element, like the tooltips and popovers, but that is optional.

const Overlays = () => {
const [show, setShow] = useState(false);
const target = useRef(null);
return (
<Fragment>
<Button variant="primary" ref={target} onClick={() => setShow(!show)}>
Click me to see
</Button>
<Overlay target={target.current} show={show} placement="right">
{({ placement, arrowProps, show: _show, popper, ...props }) => (
<div
{...props}
style={{
backgroundColor: 'rgba(117, 79, 254, 0.50)',
padding: '2px 10px',
color: 'white',
borderRadius: 3,
...props.style,
}}
>
Simple tooltip
</div>
)}
</Overlay>
</Fragment>
);
}
export default Overlays;

OverlayTrigger

Since the above pattern is pretty common, but verbose, we've included <OverlayTrigger> component to help with common use-cases. It even has functionality to delayed show or hides, and a few different "trigger" events you can mix and match.

<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={(
<Tooltip id="button-tooltip">
Simple tooltip
</Tooltip>
)}
>
<Button variant="primary">Hover me to see</Button>
</OverlayTrigger>

Customizing trigger behavior

For more advanced behaviors <OverlayTrigger> accepts a function child that passes in the injected ref and event handlers that correspond to the configured trigger prop.

const Overlays = () => {
return (
<Fragment>
<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}
roundedCircle
src="https://i.pravatar.cc/30?img=3"
width={30}
/>
<span className="ms-1">Hover to see</span>
</Button>
)}
</OverlayTrigger>
</Fragment>
);
}
export default Overlays;

Made by Codescandy

Destributed by ThemeWagon