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


#1

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?


#2

I believe it’s .caret

I good bootstrap resource is here.

Casey


#3

@casey1823

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…


#4

The tooltip arrow class is used as to draw the arrow with borders. The following CSS code should change your arrow to red:

.tooltip.top .tooltip-arrow {
	border-top-color:red;
}
.tooltip.top-left .tooltip-arrow {
	border-top-color:red;
}
.tooltip.top-right .tooltip-arrow {
	border-top-color:red;
}
.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

<style>
 </style>

#5

@teefers

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.