How to change tool tip color globally

Radzen.Blazor Components
1

I need to change the background and font color for all the tool tips. I was able to do this by setting the style in tool tips options but havent found a way to do it for the entire app

2

Hi @BrianG,

The styling of the tooltip is defined here.

You can set a few CSS variables to customize its appearance. Add the following in your application CSS file:

body {
    --rz-tooltip-color: red; /* text color */
    --rz-tooltip-background-color: blue;
}
3

I copied that to my site.css and it had no effect.

4

Is your CSS file included before or after the Radzen.Blazor theme? This CSS should come after the theme in order to override the default values. . In any case you can use a <style> element to be sure and put it after all CSS includes.

<head>
    <!-- other content -->
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css" />
    <!-- other content -->
    <style>
        body {
            --rz-tooltip-color: red; /* text color */
            --rz-tooltip-background-color: blue;
        }
    </style>
</head>

Here is how it looks.

image

5

I did have my site.css before the radzen css. I corrected this and till had no effect on the tool tip.
I Added

<style>
        body {
            --rz-tooltip-color: red; /* text color */
            --rz-tooltip-background-color: blue;
        }
    </style>

to _Host and it had no effect on the tool tip.

6

What version of Radzen.Blazor are you using? My screenshot is from the latest one. You need at least 4.x. Also what browser and version is this? Anyway this CSS will override the styling regardless of the version

.rz-tooltip-content {
   color: red !important;
   background: blue !important;
}

Also in order for this to work you must not set the style from the TooltipOptions as it will override it.

7

.rz-tooltip-content {
color: red;
background-color: blue;
}
.rz-tooltip .rz-bottom-tooltip-content:after {

background-color: blue;

}

did the trick.
Thanks