Overlays

    A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need.

    Overview

    Things to know about the react-boostrap Overlay components.

    • Overlays rely on a 3rd party library react-popper, a tiny react wrapper around Popper.js. It's include automatically with react-bootstrap, but you should reference the API for more advanced use-cases.
    • The <Tooltip> and <Popover> components do not position themselves. Instead the <Overlay> (or <OverlayTrigger>) components, inject ref and style props.
    • Tooltip expects specific props injected by the <Overlay> component
    • Tooltips for disabled elements must be triggered on a wrapper element.

    Overlay

    Overlay is the fundemental component for positioning and controlling tooltip visibility. It's a wrapper around react-popper, that adds support for transitions, and visibility toggling.

    Creating an Overlay

    Overlays consist of at least two elements, the "overlay", the element to be positioned, as well as a "target", the element the overlay is positioned in relation to. You can also also have an "arrow" element, like the tooltips and popovers, but that is optional. Be sure to check out the react-popper documentation for more details about the injected props.

    Press esc to disable tab trapping

    OverlayTrigger

    Since the above pattern is pretty common, but verbose, we've included <OverlayTrigger> component to help with common use-cases. It even has functionality to delayed show or hides, and a few different "trigger" events you can mix and match.

    Note that triggering components must be able to accept a ref since <OverlayTrigger> will attempt to add one. You can use forwardRef() for stateless function components.

    Press esc to disable tab trapping

    Tooltips

    A tooltip component for a more stylish alternative to that anchor tag title attribute.

    Examples

    Hover over the links below to see tooltips.

    Tight pants next level keffiyeh you probably haven't heard of them. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    You can pass the Overlay injected props directly to the Tooltip component.

    Press esc to disable tab trapping

    Or pass a Tooltip element to OverlayTrigger instead.

    Press esc to disable tab trapping

    Popovers

    A popover component, like those found in iOS.

    Examples

    Press esc to disable tab trapping

    As with <Tooltip>s, you can control the placement of the Popover.

    Press esc to disable tab trapping

    Disabled elements

    Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the overlay from a wrapper <div> or <span> and override the pointer-events on the disabled element.

    Press esc to disable tab trapping

    Changing containers

    Yopu can specify a container to control the DOM element the overlay is appended to. This is especially useful when styles conflict with your Overlay's.

    Press esc to disable tab trapping

    Updating position dynamically

    Since we can't know every time your overlay changes size, to reposition it, you need to take manual action if you want to update the position of an Overlay in response to a change.

    For this, the Overlay component also injects a scheduleUpdate() method that an overlay component can use to reposition itself.

    Press esc to disable tab trapping

    API

    import Overlay from 'react-bootstrap/Overlay'
    NameTypeDefaultDescription
    container
    componentOrElement | function

    A component instance, DOM node, or function that returns either. The container element will have the Overlay appended to it via a React portal.

    onEnter
    function

    Callback fired before the Overlay transitions in

    onEntered
    function

    Callback fired after the Overlay finishes transitioning in

    onEntering
    function

    Callback fired as the Overlay begins to transition in

    onExit
    function

    Callback fired right before the Overlay transitions out

    onExited
    function

    Callback fired after the Overlay finishes transitioning out

    onExiting
    function

    Callback fired as the Overlay begins to transition out

    onHide
    function

    A callback invoked by the overlay when it wishes to be hidden. Required if rootClose is specified.

    placement
    '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'
    'top'

    The placement of the OVerlay in relation to it's target.

    popperConfig
    object

    A set of popper options and props passed directly to react-popper's Popper component.

    rootClose
    boolean
    false

    Specify whether the overlay should trigger onHide when the user clicks outside the overlay

    rootCloseEvent
    'click' | 'mousedown'

    Specify event for triggering a "root close" toggle.

    show
    boolean
    false

    Set the visibility of the Overlay

    target
    componentOrElement | function

    A component instance, DOM node, or function that returns either. The overlay will be positioned in relation to the target

    transition
    boolean | elementType
    Fade

    Animate the entering and exiting of the Ovelay. true will use the <Fade> transition, or a custom react-transition-group <Transition> component can be provided.

    OverlayTriggerview source file

    import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
    NameTypeDefaultDescription
    children required
    element
    defaultShow
    boolean

    The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly.

    delay
    number | shape

    A millisecond delay amount to show and hide the Overlay once triggered

    onHide
    null
    overlay
    function | element

    An element or text to overlay next to the target.

    popperConfig
    object

    A Popper.js config object passed to the the underlying popper instance.

    show
    null
    target
    null
    trigger
    'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>
    ['hover', 'focus']

    Specify which action or actions trigger Overlay visibility

    import Tooltip from 'react-bootstrap/Tooltip'
    NameTypeDefaultDescription
    arrowProps
    { ref: ReactRef, style: Object }

    An Overlay injected set of props for positioning the tooltip arrow.

    This is generally provided by the Overlay component positioning the tooltip

    id required
    string|number

    An html id attribute, necessary for accessibility

    innerRef
    any
    outOfBoundaries
    any
    placement
    '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'
    'right'

    Sets the direction the Tooltip is positioned towards.

    This is generally provided by the Overlay component positioning the tooltip

    scheduleUpdate
    function
    bsPrefix
    string
    'tooltip'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Popover from 'react-bootstrap/Popover'
    NameTypeDefaultDescription
    arrowProps
    shape

    An Overlay injected set of props for positioning the popover arrow.

    This is generally provided by the Overlay component positioning the popover

    id required
    string|number

    An html id attribute, necessary for accessibility

    innerRef
    any
    outOfBoundaries
    boolean
    placement
    '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'
    'right'

    Sets the direction the Popover is positioned towards.

    This is generally provided by the Overlay component positioning the popover

    scheduleUpdate
    function
    title
    node

    Title content

    bsPrefix
    string
    'popover'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.