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
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 null
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 null
trigger triggerType | triggerType[]
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