How To Style React-Bootstrap ToolTip Background & Border Color

React-Bootstrap uses the Overlay component to construct ToolTips and other popper components. In this tutorial we will add simple background and border styling. Then we will add a more complex border that wraps the pointer arrow on the ToolTip.

Here’s what we will build:

My demo is inspired by this great tooltip post by Calvin Pak. I will do this full tutorial with React-Bootstrap while Calvin used Reactstrap. There is a simpler way of creating Tooltips with the OverlayTrigger component but I have not explored styling the arrow in that component.

How to Add Background Color to a React-Bootstrap ToolTip

In a previous post I explored how to position the React-Bootstrap ToolTip and how to add an arrow. I’ll include similar code here, but with an emphasis on the background and text color of the ToolTip.

//CustomBackgroundToolTip.tsx

import { useRef, useState } from "react";
import Button from "react-bootstrap/Button";
import Overlay from "react-bootstrap/Overlay";
import "./CustomBackgroundToolTip.scss";

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

  return (
    <>
      <Button variant="danger" ref={target} onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show) }>
        Hover Me!
      </Button>
      <Overlay target={target.current} show={show} placement="top">
        {({ placement, arrowProps, show: _show, popper, ...props }) => (
          <div
            className="tooltip"
            {...props}
            style={{
              ...props.style,
              bottom: "1rem"
            }}
          >
            Custom ToolTip
          </div>
        )}
      </Overlay>
    </>
  );
}

Notice in the code above I added a class called “tooltip”. This is where the background color styling is added:

//CustomBackgroundToolTip.scss

@import "bootstrap/scss/bootstrap";

.tooltip {
  background-color: grey;
  padding: 2px 10px;
  color: red;
  border-radius: 4px;
}

This creates a nicely styled tooltip and does not take much effort. In the next section we will use the before and after pseudo-elements to add an arrow with a great border effect.

How to Add Border Color to a React-Bootstrap ToolTip with Arrow

Now we are going to add an arrow and give it a border, plus add a border to the whole tooltip.

First, add this to the tooltip CSS class:

border: 3px solid red;

Now we have a nice border on our tooltip:

Next we will add the arrow. I discussed the arrow code in the post linked above so I won’t go too in depth here. However, the before pseudo-element is new and it is what provides the appearance of a border on our tooltip.

.tooltip:before,
.tooltip:after {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
}

.tooltip:before {
  border-width: 10px;
  left: calc(50% - 11px);
  border-color: red transparent transparent transparent;
  top: 100%;
}
.tooltip:after {
  border-width: 8px;
  border-color: grey transparent transparent transparent ;
  left: calc(50% - 8px);
}

Some of the code is shared between the before and after pseudo-elements. Some of the code is unique to each, that’s why there are a two selectors for each.

The after code creates a tooltip arrow that looks like the below:

It does not look right since the tooltip has a 3px thick border. However, once we add the before code then we get the visual effect of an extended arrow with border:

Our CSS code is creating a larger before pseudo-element that is a filled red triangle. This is accomplished with a 10px border that is transparent on three side of the border, leaving the fourth side (the top) looking like a triangle.

The after pseudo-element creates a smaller grey triangle that overlays the before.

The React-Bootstrap Tooltip can require lots of customizing. The MUI Tooltip has lots of functionality out of the box and is easy to style.

This demo uses a simple Tooltip component on React-Bootstrap Table Cell Hover.