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.