A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need.
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.
<Popover>components do not position themselves. Instead the
<OverlayTrigger>) components, inject
- Tooltip expects specific props injected by the
- Tooltips for
disabledelements must be triggered on a wrapper element.
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.
Customizing Overlay rendering
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
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
implementation for an example on how this is done.
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.
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
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.
Using the function form of OverlayTrigger avoids a
React.findDOMNode call, for those trying to be strict mode
A tooltip component for a more stylish alternative to that anchor tag
Hover over the links below to see tooltips.
You can pass the
Overlay injected props directly to the
Or pass a Tooltip element to
A popover component, like those found in iOS.
<Tooltip>s, you can control the placement of the Popover.
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
<span> and override the
pointer-events on the
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.
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
prop with a
scheduleUpdate() method that an overlay
component can use to reposition itself.