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

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)