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 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 object | bool
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	22.9.0	1
frontend-app-admin-portal	21.13.1	18
frontend-app-authn	22.10.0	1
frontend-app-course-authoring	22.8.1	15
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.8.1	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

Theme

Overlay

Basic usage

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Theme

Overlay

Basic usage#

Props API#

Usage Insights#

OverlayTrigger

All components (A-Z)

Basic usage