Overlay

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

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  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={isOpen} 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={isOpen} 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>
    </>
  );
}

Props API#

Overlay Props API

children OverlayProps['children'] Required
Specifies the content of the Overlay.
container OverlayProps['container']
A component instance, DOM node, or function that returns either. The overlay will be positioned in relation to the target.
onEnter OverlayProps['onEnter']
Callback fired before the Overlay transitions in.
onEntered OverlayProps['onEntered']
Callback fired after the Overlay finishes transitioning in.
onEntering OverlayProps['onEntering']
Callback fired as the Overlay begins to transition in.
onExit OverlayProps['onExit']
Callback fired right before the Overlay transitions out.
onExited OverlayProps['onExited']
Callback fired after the Overlay finishes transitioning out.
onExiting OverlayProps['onExiting']
Callback fired as the Overlay begins to transition out.
onHide OverlayProps['onHide']
A callback invoked by the overlay when it wishes to be hidden. Required if rootClose is specified.
placement Placement
The placement of the Overlay in relation to its target.
Default'top'
popperConfig OverlayProps['popperConfig']
A set of popper options and props passed directly to Popper.
Default{}
rootClose boolean
Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
Defaultfalse
rootCloseEvent OverlayProps['rootCloseEvent']
Specify event for triggering a "root close" toggle.
show boolean
Set the visibility of the Overlay.
Defaultfalse
target OverlayProps['target']
The target element the Overlay is positioned in relation to.
transition OverlayProps['transition']
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 OverlayTriggerProps['children'] Required
Specifies the content of the OverlayTrigger.
overlay OverlayTriggerProps['overlay'] Required
An element or text to overlay next to the target.
defaultShow boolean
The initial visibility state of the Overlay.
Defaultfalse
delay OverlayTriggerProps['delay']
A millisecond delay amount to show and hide the Overlay once triggered.
flip boolean
The initial flip state of the Overlay.
onHide OverlayTriggerProps['onHide']
Callback fired when the visibility of the overlay changes.
onToggle OverlayTriggerProps['onToggle']
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.
placement Placement
The placement of the Overlay in relation to its target.
popperConfig OverlayTriggerProps['popperConfig']
A Popper.js config object passed to the underlying popper instance.
Default{}
show boolean
The visibility of the Overlay. show is a controlled prop so should be paired with onToggle to avoid breaking user interactions.
target OverlayTriggerProps['target']
The target element the Overlay is positioned in relation to.
trigger OverlayTriggerType | OverlayTriggerType[]
Specify which action or actions trigger Overlay visibility.
Default['hover', 'focus']

Usage Insights#

OverlayTrigger

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	1
frontend-app-admin-portal	21.13.1	19
frontend-app-authn	22.11.2	1
frontend-app-course-authoring	22.8.1	14
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	19
frontend-app-gradebook	22.8.1	1
frontend-app-learner-portal-enterprise	21.13.1	4
frontend-app-learner-record	22.10.0	2
frontend-app-learning	22.10.0	8
frontend-app-library-authoring	21.11.3	2
frontend-app-ora-grading	21.11.3	2
frontend-app-publisher	21.13.1	2
frontend-app-support-tools	21.13.1	4
frontend-component-header-edx	21.13.1	2
frontend-component-header	22.10.0	1
prospectus	20.46.2	6

Edit this page Leave feedback

Paragon Design System

Overlay

Basic usage

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Overlay

Basic usage#

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Basic usage