New to Telerik UI for Blazor? Download free 30-day trial

Custom ToolTip Styles and Colors


Product ToolTip for Blazor


How to customize the Blazor ToolTip styling? I want to set different text color and background color.


  1. Review the fundamentals of custom styling and CSS overrides.
  2. Set a Class to the TelerikToolTip component.
  3. Each tooltip is a div.k-tooltip. Note that the custom CSS class renders on the tooltip's container, not the .k-tooltip element itself. So use a descendant CSS combinator.
  4. If using a custom background color for .k-tooltip, then use the same text color for .k-tooltip .k-callout.

Blazor ToolTip with custom background and text color

<div class="target" title="ToolTip Text">Blue background, yelow color</div>

<TelerikTooltip TargetSelector=".target" Class="blue-yellow" />

    /* the ToolTip Class renders on the tooltip's container */
    .blue-yellow .k-tooltip {
        background: blue;
        color: yellow;

    .blue-yellow .k-tooltip .k-callout {
        /* same as tooltip background */
        color: blue;

    .target {
        position: absolute;
        top: 25vh;
        left: 25vw;
        width: 15vw;
        height: 10vh;
        border: 1px solid;
        padding: 1em;
In this article