Customize Tooltip Styling

You can customize the styling of the Tooltip by overwriting the built-in styles of the internal elements.

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

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div kendoTooltip tooltipClass="my-class" style="text-align: center; padding-top: 10px;">
        <button class="k-button k-primary" title="Saves the current document">
            Save
        </button>

        <button class="k-button" title="Discards all changes">
            Cancel
        </button>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styles: [`
    .my-class * {
        font-size: 1.2em;
        color: yellow;
        background: blue;
    }

    .my-class .k-callout {
        background-color: transparent;
        color: blue;
    }
  `]
})
export class AppComponent {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TooltipModule } from '@progress/kendo-angular-tooltip';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, TooltipModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article