Customizing the Styling of the Tooltip

Environment

Description

How can I customize the styling of the Kendo UI for Angular Tooltip?

Solution

Overwrite the built-in styles of the internal elements in the Tooltip.

1. Add a custom class to the Tooltip wrapper by using tooltipClass.

   Copy Code    <div kendoTooltip tooltipClass="my-class" style="text-align: center; padding-top: 10px;">...

2. Target specific or all inner elements, and provide the desired CSS rules.

   Copy Code    .my-class * {
           font-size: 1.2em;
           color: yellow;
           background: blue;
       }

3. Handle the specific rendering and styling of the callout (arrow) elements too.

   Copy Code    .my-class .k-callout {
           background-color: transparent;
           color: blue;
       }

The following example demonstrates the full implementation of the suggested approach.