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

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

Props API#

Overlay Props API

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

Usage Insights#

OverlayTrigger

Project Name	Paragon Version	Instance Count
frontend-app-account	20.44.0	1
frontend-app-admin-portal	20.39.2	13
frontend-app-authn	20.45.5	1
frontend-app-course-authoring	20.35.1	2
frontend-app-discussions	20.44.0	19
frontend-app-gradebook	20.45.0	1
frontend-app-learner-portal-enterprise	20.45.1	1
frontend-app-learner-record	20.45.0	2
frontend-app-learning	20.28.4	9
frontend-app-ora-grading	20.45.1	2
frontend-app-publisher	20.28.5	2
frontend-app-support-tools	20.45.0	1
frontend-component-header-edx	20.45.5	1
frontend-component-header	20.45.5	1
frontend-lib-content-components	20.45.0	3
prospectus	20.45.2	6

Leave feedback

Paragon Design System

Theme

Overlays

Basic usage

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Theme

Overlays

Basic usage#

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Basic usage