Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

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']

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)