How to change the background color of Bootstrap Tooltips

Tips and Tricks
1

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;
}
3 Likes