Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

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.

Design
Code
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.

Design
Code
<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.

Design
Code
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}
                        alt=""
                    />
                    <span className="ms-1">Hover to see</span>
                </Button>
                )}
            </OverlayTrigger>
        </Fragment>
    );
}
export default Overlays;