跳到主要内容

Overlay

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

Overview

Things to know about the React-Bootstrap Overlay components.

  • Overlays rely on the third-party library Popper.js. It's included 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 fundamental component for positioning and controlling tooltip visibility. It's a wrapper around Popper.js, 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 have an "arrow" element, like the tooltips and popovers, but that is optional. Be sure to check out the Popper documentation for more details about the injected props.

结果
Loading...
实时编辑器

Customizing Overlay rendering

The Overlay injects a number of props that you can use to customize the rendering behavior. There is a case where you would need to show the overlay before Popper can measure and position it properly. In React-Bootstrap, tooltips and popovers sets the opacity and position to avoid issues where the initial positioning of the overlay is incorrect. See the Tooltip implementation for an example on how this is done.

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 function components.

结果
Loading...
实时编辑器

Customizing trigger behavior

For more advanced behaviors <OverlayTrigger> accepts a function child that passes in the injected ref and event handlers that correspond to the configured trigger prop.

You can manually apply the props to any element you want or split them up. The example below shows how to position the overlay to a different element than the one that triggers its visibility.

结果
Loading...
实时编辑器

Tooltips

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

Examples

Hover over the links below to see tooltips.

结果
Loading...
实时编辑器

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

结果
Loading...
实时编辑器

Or pass a Tooltip element to OverlayTrigger instead.

结果
Loading...
实时编辑器

Popovers

A popover component, like those found in iOS.

Examples

结果
Loading...
实时编辑器

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

结果
Loading...
实时编辑器

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.

结果
Loading...
实时编辑器

Changing containers

You can specify a container to control the DOM element the overlay is appended to. This is especially useful when styles conflict with your Overlays.

结果
Loading...
实时编辑器

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 popper prop with a scheduleUpdate() method that an overlay component can use to reposition itself.

结果
Loading...
实时编辑器

API

Overlay

OverlayTrigger

Tooltip

Popover

PopoverBody

PopoverHeader