New to Kendo UI for Angular? Start a free 30-day trial

Environment

ProductProgress® Kendo UI for Angular Tooltip

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.

        <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.

        .my-class * {
            font-size: 1.2em;
            color: yellow;
            background: blue;
        }
  3. Handle the specific rendering and styling of the callout (arrow) elements too.

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

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

Example
View Source
Change Theme:

In this article

Not finding the help you need?