CSS tooltip and popover

Support
#1

Hi,

Title says it all: how can I change the CSS of the tooltip and popover, like colors, fonts, shadows and so on? I vaguely remember having dealt with that in the past but that was before CS and Pro. I found one class (.tooltip-inner) but the others as well, for instance the class for the little triangle/arrow which is separate from the tooltip itself.

It might be an idea to add a KB article for this kind of common CSS adjustments?

Thanks!

#2

Hi,

You can find information on tooltips here. Notice that you can add a class or ID to the tooltip. After doing so I would inspect the tooltip on frontend via the Browser inspect tool and CSS it from there.

Hopefully that helps

#3

And how can I add a class or ID to a tooltip? For images, for instance, you can only add class or ID to the image, not the tooltip…

#4

Hi There,

You can add

.tooltip {

background: red !important;

}

Hope it helps

#5

Okay, but now the little arrow is still black. What class is that?

#6

Hi There,

You can use the custom CSS below to style the tooltip, change the color values accordingly.

/*tooltip arrow*/
.tooltip .tooltip-arrow {
	border-bottom-color: cyan !important;
	border-top-color: cyan !important;
}

/*tooltip content*/
.tooltip .tooltip-inner {
	 color: black;
	 background-color: cyan;
}

Cheers!

#7

Ah, that’s what I was looking for. Thank you!

#8

Glad to hear it!