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 fundamental 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.

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  return (
    <>
      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>
        Click me to see
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {({
          placement,
          scheduleUpdate,
          arrowProps,
          outOfBoundaries,
          show: _show,
          ...props
        }) => (
          <div
            {...props}
            style={{
              backgroundColor: 'rgba(255, 100, 100, 0.85)',
              padding: '2px 10px',
              color: 'white',
              borderRadius: 3,
              ...props.style,
            }}
          >
            Simple tooltip
          </div>
        )}
      </Overlay>
    </>
  );
}

render(<Example />);

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);
  return (
    <>
      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>
        Click me to see
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {({
          placement,
          scheduleUpdate,
          arrowProps,
          outOfBoundaries,
          show: _show,
          ...props
        }) => (
          <div
            {...props}
            style={{
              backgroundColor: 'rgba(255, 100, 100, 0.85)',
              padding: '2px 10px',
              color: 'white',
              borderRadius: 3,
              ...props.style,
            }}
          >
            Simple tooltip
          </div>
        )}
      </Overlay>
    </>
  );
}
render(<Example />);

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.

function renderTooltip(props) {
  return <Tooltip {...props}>Simple tooltip</Tooltip>;
}

const Example = () => (
  <OverlayTrigger
    placement="right"
    delay={{ show: 250, hide: 400 }}
    overlay={renderTooltip}
  >
    <Button variant="success">Hover me to see</Button>
  </OverlayTrigger>
);

render(<Example />);

function renderTooltip(props) {
  return <Tooltip {...props}>Simple tooltip</Tooltip>;
}
const Example = () => (
  <OverlayTrigger
    placement="right"
    delay={{ show: 250, hide: 400 }}
    overlay={renderTooltip}
  >
    <Button variant="success">Hover me to see</Button>
  </OverlayTrigger>
);
render(<Example />);

Tooltips

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

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.

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  return (
    <>
      <Button ref={target} onClick={() => setShow(!show)}>
        Click me!
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {props => (
          <Tooltip id="overlay-example" {...props}>
            My Tooltip
          </Tooltip>
        )}
      </Overlay>
    </>
  );
}

render(<Example />);

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);
  return (
    <>
      <Button ref={target} onClick={() => setShow(!show)}>
        Click me!
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {props => (
          <Tooltip id="overlay-example" {...props}>
            My Tooltip
          </Tooltip>
        )}
      </Overlay>
    </>
  );
}
render(<Example />);

Or pass a Tooltip element to OverlayTrigger instead.

<ButtonToolbar>
  {['top', 'right', 'bottom', 'left'].map(placement => (
    <OverlayTrigger
      key={placement}
      placement={placement}
      overlay={
        <Tooltip id={`tooltip-${placement}`}>
          Tooltip on <strong>{placement}</strong>.
        </Tooltip>
      }
    >
      <Button variant="secondary">Tooltip on {placement}</Button>
    </OverlayTrigger>
  ))}
</ButtonToolbar>

<ButtonToolbar>
  {['top', 'right', 'bottom', 'left'].map(placement => (
    <OverlayTrigger
      key={placement}
      placement={placement}
      overlay={
        <Tooltip id={`tooltip-${placement}`}>
          Tooltip on <strong>{placement}</strong>.
        </Tooltip>
      }
    >
      <Button variant="secondary">Tooltip on {placement}</Button>
    </OverlayTrigger>
  ))}
</ButtonToolbar>

Popovers

A popover component, like those found in iOS.

const popover = (
  <Popover id="popover-basic">
    <Popover.Title as="h3">Popover right</Popover.Title>
    <Popover.Content>
      And here's some <strong>amazing</strong> content. It's very engaging.
      right?
    </Popover.Content>
  </Popover>
);

const Example = () => (
  <OverlayTrigger trigger="click" placement="right" overlay={popover}>
    <Button variant="success">Click me to see</Button>
  </OverlayTrigger>
);

render(<Example />);

const popover = (
  <Popover id="popover-basic">
    <Popover.Title as="h3">Popover right</Popover.Title>
    <Popover.Content>
      And here's some <strong>amazing</strong> content. It's very engaging.
      right?
    </Popover.Content>
  </Popover>
);
const Example = () => (
  <OverlayTrigger trigger="click" placement="right" overlay={popover}>
    <Button variant="success">Click me to see</Button>
  </OverlayTrigger>
);
render(<Example />);

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

<ButtonToolbar>
  {['top', 'right', 'bottom', 'left'].map(placement => (
    <OverlayTrigger
      trigger="click"
      key={placement}
      placement={placement}
      overlay={
        <Popover id={`popover-positioned-${placement}`}>
          <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      }
    >
      <Button variant="secondary">Popover on {placement}</Button>
    </OverlayTrigger>
  ))}
</ButtonToolbar>

<ButtonToolbar>
  {['top', 'right', 'bottom', 'left'].map(placement => (
    <OverlayTrigger
      trigger="click"
      key={placement}
      placement={placement}
      overlay={
        <Popover id={`popover-positioned-${placement}`}>
          <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      }
    >
      <Button variant="secondary">Popover on {placement}</Button>
    </OverlayTrigger>
  ))}
</ButtonToolbar>

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.

<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
  <span className="d-inline-block">
    <Button disabled style={{ pointerEvents: 'none' }}>
      Disabled button
    </Button>
  </span>
</OverlayTrigger>

<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
  <span className="d-inline-block">
    <Button disabled style={{ pointerEvents: 'none' }}>
      Disabled button
    </Button>
  </span>
</OverlayTrigger>

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 Overlay's.

function Example() {
  const [show, setShow] = useState(false);
  const [target, setTarget] = useState(null);
  const ref = useRef(null);

  const handleClick = event => {
    setShow(!show);
    setTarget(event.target);
  };

  return (
    <ButtonToolbar ref={ref}>
      <Button onClick={handleClick}>Holy guacamole!</Button>

      <Overlay
        show={show}
        target={target}
        placement="bottom"
        container={ref.current}
        containerPadding={20}
      >
        <Popover id="popover-contained">
          <Popover.Title as="h3">Popover bottom</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      </Overlay>
    </ButtonToolbar>
  );
}

render(<Example />);

function Example() {
  const [show, setShow] = useState(false);
  const [target, setTarget] = useState(null);
  const ref = useRef(null);
  const handleClick = event => {
    setShow(!show);
    setTarget(event.target);
  };
  return (
    <ButtonToolbar ref={ref}>
      <Button onClick={handleClick}>Holy guacamole!</Button>
      <Overlay
        show={show}
        target={target}
        placement="bottom"
        container={ref.current}
        containerPadding={20}
      >
        <Popover id="popover-contained">
          <Popover.Title as="h3">Popover bottom</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      </Overlay>
    </ButtonToolbar>
  );
}
render(<Example />);

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.

const UpdatingPopover = React.forwardRef(
  ({ scheduleUpdate, children, ...props }, ref) => {
    useEffect(() => {
      console.log('updating!');
      scheduleUpdate();
    }, [children, scheduleUpdate]);
    return (
      <Popover ref={ref} {...props}>
        {children}
      </Popover>
    );
  },
);

const longContent = `
  Very long
  Multiline content
  that is engaging and what-not
`;
const shortContent = 'Short and sweet!';

function Example() {
  const [content, setContent] = useState(shortContent);

  useEffect(() => {
    const timerId = setInterval(() => {
      setContent(content === shortContent ? longContent : shortContent);
    }, 3000);

    return () => clearInterval(timerId);
  });

  return (
    <OverlayTrigger
      trigger="click"
      overlay={
        <UpdatingPopover id="popover-contained">{content}</UpdatingPopover>
      }
    >
      <Button>Holy guacamole!</Button>
    </OverlayTrigger>
  );
}

render(<Example />);

const UpdatingPopover = React.forwardRef(
  ({ scheduleUpdate, children, ...props }, ref) => {
    useEffect(() => {
      console.log('updating!');
      scheduleUpdate();
    }, [children, scheduleUpdate]);
    return (
      <Popover ref={ref} {...props}>
        {children}
      </Popover>
    );
  },
);
const longContent = `
  Very long
  Multiline content
  that is engaging and what-not
`;
const shortContent = 'Short and sweet!';
function Example() {
  const [content, setContent] = useState(shortContent);
  useEffect(() => {
    const timerId = setInterval(() => {
      setContent(content === shortContent ? longContent : shortContent);
    }, 3000);
    return () => clearInterval(timerId);
  });
  return (
    <OverlayTrigger
      trigger="click"
      overlay={
        <UpdatingPopover id="popover-contained">{content}</UpdatingPopover>
      }
    >
      <Button>Holy guacamole!</Button>
    </OverlayTrigger>
  );
}
render(<Example />);

API

Overlayview source file

import Overlay from 'react-bootstrap/Overlay'

Name	Type	Default	Description
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'

Name	Type	Default	Description
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
flip	boolean		The initial flip state of the Overlay.
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'

Name	Type	Default	Description
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
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'

Name	Type	Default	Description
arrowProps	shape		An Overlay injected set of props for positioning the popover arrow. This is generally provided by the `Overlay` component positioning the popover
content	boolean		When this prop is set, it creates a Popover with a Popover.Content inside passing the children directly to it
id required	string\|number		An html id attribute, necessary for accessibility
outOfBoundaries	boolean
placement	`'auto'` \| `'top'` \| `'bottom'` \| `'left'` \| `'right'`	`'right'`	Sets the direction the Popover is positioned towards. This is generally provided by the `Overlay` component positioning the popover
scheduleUpdate	function
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.

import PopoverContent from 'react-bootstrap/PopoverContent'

Name	Type	Default	Description
as	elementType		Set a custom element for this component
bsPrefix	string	`'popover-body'`	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 PopoverTitle from 'react-bootstrap/PopoverTitle'

Name	Type	Default	Description
as	elementType		Set a custom element for this component
bsPrefix	string	`'popover-header'`	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.

Overlays

Overview

Overlay

Creating an Overlay

OverlayTrigger

Tooltips

Examples

Popovers

Examples

Disabled elements

Changing containers

Updating position dynamically

API

Overlayview source file

OverlayTriggerview source file

Tooltipview source file

Popoverview source file

PopoverContentview source file

PopoverTitleview source file

Overlays#

Overview#

Overlay#

Creating an Overlay#

OverlayTrigger#

Tooltips#

Examples#

Popovers#

Examples#

Disabled elements#

Changing containers#

Updating position dynamically#

API#

Overlay#view source file

OverlayTrigger#view source file

Tooltip#view source file

Popover#view source file

PopoverContent#view source file

PopoverTitle#view source file

Overlays

Overview

Overlay

Creating an Overlay

OverlayTrigger

Tooltips

Examples

Popovers

Examples

Disabled elements

Changing containers

Updating position dynamically

API

Overlayview source file

OverlayTriggerview source file

Tooltipview source file

Popoverview source file

PopoverContentview source file

PopoverTitleview source file