React Bootstrap — Overlays

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add overlays with React Bootstrap.

Overlay

Overlays are tooltips that we can display when we click or hover over an element.

To add a simple one, we use the Overlay component:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import Overlay from "react-bootstrap/Overlay";

export default function App() {
  const [show, setShow] = React.useState(false);
  const target = React.useRef(null);

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

We create a ref with the useRef on the button so that it can be referenced in the Overlay component.

This way, it’ll be shown when we click on the button.

Then we add the Overlay component, which takes a function with an object with various properties as a parameter as a child.

placement sets the placement.

scheduleUpdate lets the overlay reposition itself.

arrowProps lets us change the position of the tooltip arrow.

The function returns an element with some styles and the content for what to display.

The target prop is the element that’ll trigger the element to be displayed.

In our example, it’ll be the button.

placement is set to right to display it on the right.

OverlayTrigger

We can use the OverlayRrigger component to create an overlay with a trigger all one place.

This way, we don’t need to create a ref for the trigger

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

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

export default function App() {
  return (
    <>
      <OverlayTrigger
        placement="right"
        delay={{ show: 250, hide: 400 }}
        overlay={renderTooltip}
      >
        <Button variant="success">Hover me</Button>
      </OverlayTrigger>
    </>
  );
}

to simplify our tooltip code.

We use the OverlayTrigger component with the placement set to the right .

delay is an object to set the delays when we show or hide the tooltip in milliseconds.

overlay has the component with the tooltip.

It takes all the props which we pass into the Tooltip .

We can set the placement of the tooltip with the placement prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

export default function App() {
  return (
    <>
      {["top", "right", "bottom", "left"].map(placement => (
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={<Tooltip>Tooltip {placement}.</Tooltip>}
        >
          <Button variant="secondary">Tooltip {placement}</Button>
        </OverlayTrigger>
      ))}
    </>
  );
}

It can be top, right, bottom, or left.

Popovers

We can have popovers, which are tooltips with more content.

They look like the opens found in iOS.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

const popover = (
  <Popover>
    <Popover.Title as="h1">Popover right</Popover.Title>
    <Popover.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing <b>lit.</b>
    </Popover.Content>
  </Popover>
);

export default function App() {
  return (
    <>
      <OverlayTrigger trigger="click" placement="right" overlay={popover}>
        <Button variant="success">Click me</Button>
      </OverlayTrigger>
    </>
  );
}

to add a pop over to the right of the button.

It’s displayed when we click it.

We use the built-in Popover component to display it when we triggered it.

We pass it into the overlay prop so that it’ll be displayed when we click on the button as the trigger indicated.

Popovers can also be placed in different locations just like tooltips:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

export default function App() {
  return (
    <>
      {["top", "right", "bottom", "left"].map(placement => (
        <OverlayTrigger
          trigger="click"
          key={placement}
          placement={placement}
          overlay={
            <Popover id={`popover-positioned-${placement}`}>
              <Popover.Title as="h1">{`Popover ${placement}`}</Popover.Title>
              <Popover.Content>
                Lorem ipsum dolor sit amet, consectetur adipiscing <b>lit.</b>
              </Popover.Content>
            </Popover>
          }
        >
          <Button variant="secondary">Popover {placement}</Button>
        </OverlayTrigger>
      ))}
    </>
  );
}

We set the placement prop to top , right , bottom , or left to display them in those locations.

Conclusion

We can add tooltips and popovers with the Overlay or OverlayTrigger component.

OverlayTrigger is shorter so we can write less code.