Overlays

A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need.

This component is used to power Tooltips and Popovers.

This is a pass through component from React-Bootstrap.
See React-Bootstrap for additional documentation.

Basic usage

() => {
  const [isOpen, open, close] = useToggle(false);
  const target = React.useRef(null);

  return (
    <>
      <div className="d-flex">
        <Button variant="danger" ref={target} onClick={() => open(!isOpen)}>
          Click me to see
        </Button>
      </div>
      <Overlay target={target.current} show={open} placement="right">
        {({ placement, arrowProps, show: _show, popper, ...props }) => (
          <div
            {...props}
            style={{
              backgroundColor: 'rgba(255, 100, 100, 0.85)',
              padding: '2px 10px',
              color: 'white',
              borderRadius: 3,
              ...props.style,
            }}
          >
            Simple tooltip
          </div>
        )}
      </Overlay>
    </>
  );
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const target = React.useRef(null);

  return (
    <>
      <div className="d-flex">
        <Button variant="danger" ref={target} onClick={() => open(!isOpen)}>
          Click me to see
        </Button>
      </div>
      <Overlay target={target.current} show={open} placement="right">
        {({ placement, arrowProps, show: _show, popper, ...props }) => (
          <div
            {...props}
            style={{
              backgroundColor: 'rgba(255, 100, 100, 0.85)',
              padding: '2px 10px',
              color: 'white',
              borderRadius: 3,
              ...props.style,
            }}
          >
            Simple tooltip
          </div>
        )}
      </Overlay>
    </>
  );
}

Overlay Props API

children node Required Required
Specifies the content of the Overlay.
container elementType Required | func Required Required
A component instance, DOM node, or function that returns either. The overlay will be positioned in relation to the target.
onEnter func Required
Callback fired before the Overlay transitions in.
onEntered func Required
Callback fired after the Overlay finishes transitioning in.
onEntering func Required
Callback fired as the Overlay begins to transition in.
onExit func Required
Callback fired right before the Overlay transitions out
onExited func Required
Callback fired after the Overlay finishes transitioning out.
onExiting func Required
Callback fired as the Overlay begins to transition out.
onHide func Required
A callback invoked by the overlay when it wishes to be hidden. Required if rootClose is specified.
placement enum Required'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'
The placement of the Overlay in relation to it's target.
Default'top'
popperConfig shape Required {}
A set of popper options and props passed directly to Popper.
Default{}
rootClose bool Required
Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
Defaultfalse
rootCloseEvent enum Required'click' | 'mousedown'
Specify event for triggering a “root close” toggle.
show bool Required
Set the visibility of the Overlay.
Defaultfalse
target elementType Required | func Required Required
The visibility of the Overlay. show is a controlled prop so should be paired with onToggle to avoid breaking user interactions.
Manually toggling show does not wait for delay to change the visibility.
Controls onToggle.
transition func Required
Animate the entering and exiting of the Overlay. true will use the <Fade> transition, or a custom react-transition-group <Transition> component can be provided.
DefaultFade

OverlayTrigger Props API

children element Required | func Required Required Required
Specifies the content of the OverlayTrigger.
overlay element Required | func Required Required Required
An element or text to overlay next to the target.
defaultShow bool Required
The initial visibility state of the Overlay.
Defaultfalse
delay number Required | shape Required {} Required
A millisecond delay amount to show and hide the Overlay once triggered.
flip bool Required
The initial flip state of the Overlay.
onHide null Required
onToggle func Required
A callback that fires when the user triggers a change in tooltip visibility. onToggle is called with the desired next show, and generally should be passed back to the show prop. onToggle fires after the configured delay.
Controls show.
placement enum Required'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'
The placement of the Overlay in relation to it's target.
popperConfig shape Required {}
A Popper.js config object passed to the the underlying popper instance.
Default{}
show bool Required
The visibility of the Overlay. show is a controlled prop so should be paired with onToggle to avoid breaking user interactions.
Manually toggling show does not wait for delay to change the visibility.
Controls onToggle.
target null Required
trigger triggerType Required | triggerType Required[] Required Required
Specify which action or actions trigger Overlay visibility.
Default['hover', 'focus']

Paragon Design System

Overlays

Basic usage

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Overlays

Basic usage#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic usage