Custom ToolTip Styles and Colors

Environment

Product

ToolTip for Blazor

Description

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

Solution

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" />

<style>
    /* 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;
    }
</style>