# How to change the background color of Bootstrap Tooltips

**URL:** https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064
**Category:** Tips and Tricks
**Created:** [March 14, 2021, 12:55am UTC](https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064 "2021-03-14T00:55:06Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [March 14, 2021, 12:55am UTC](https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064/1 "2021-03-14T00:55:07Z")

</div>

For some reason, I found this rather difficult to accomplish. The main problem I kept running into was the arrow (which as you can see is done with a pseudo class.) I tried at least five stack overflow “solutions” but this was the only one that worked.

I figured, since I had a such a hard time finding this, it might be helpful to someone else to post the _working_ solution. This particular CSS will create a solid red tooltip. You can, of course, change the color and opacity to your liking (NOTE: this has only been tested in Bootstrap 4. Not sure if the classes are the same in Bootstrap 5.)

```
.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #ff0000 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
 border-left-color: #ff0000 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
 border-bottom-color: #ff0000 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
 border-top-color: #ff0000 !important;
}
```

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [July 17, 2025, 12:44am UTC](https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064/2 "2025-07-17T00:44:39Z")

</div>

Someone recently asked me why this CSS trick doesn’t work with Bootstrap 5. It’s because that code was for specific for Bootstrap 4 tooltips. Bootstrap 5 vastly simplified the ability to customize the tooltips by using a single CSS variable to color both the tooltip and it’s arrow. So if you want a red tooltip with a red arrow and white text, all you need to do is use this CSS…

```auto
.tooltip {
  --bs-tooltip-bg: #ff0000;
  --bs-tooltip-color: #ffffff;
}

```

Obviously you can change the colors as you desire.