Tooltip - how to change colour / which class or sub-class


Morning forum!

I want to customise the tooltip.
I managed to change to background colour, the font and the font colour by making the changes in the class .tooltip-inner.

I would also like to change the colour of the little triangle below. How can I target that? Which class is that?


I believe it’s .caret

I good bootstrap resource is here.




Thank you for the link!

Making changes in .caret did not affect the triangle at all.
It seems to be .tooltip-arrow.
However when I change to colour the triangle becomes a line…


The tooltip arrow class is used as to draw the arrow with borders. The following CSS code should change your arrow to red: .tooltip-arrow {
} .tooltip-arrow {
} .tooltip-arrow {
.tooltip.right .tooltip-arrow {
	border-right-color: red;
.tooltip.left .tooltip-arrow {
	border-left-color: red;
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: red;
.tooltip.bottom-left .tooltip-arrow {
	border-bottom-color: red;
.tooltip.bottom-right .tooltip-arrow {
	border-bottom-color: red;

You could put this in the page Add custom code to head & body area (head code).
Just change the color to what you want, and surround the code with style tags




Thank your for your answer!

The code works fine.
I tried different colours but the red plays rather nicely with the design of the site.
So, I changed it back to red.

Btw, I tried to achieve the same effect using the style settings in the class manager but could not get it to work. I don’t know wether that is a bug or just me being dumb.


It seems that “.tooltip-arrow” has been deleted from Bootstrap 4 for some reason:


Hello @JDW check my help here:

Blocs 3.2 Beta Build 4