Customization in Angular Tooltip component

8 Jan 20259 minutes to read

The Tooltip can be customized by using the cssClass property, which accepts custom CSS class names that define specific user-defined styles and themes to be applied to the Tooltip element.

Tip pointer customization

The tip pointer’s size, background, and border colors can be styled using the cssClass property, as shown below.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



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

@Component({
imports: [
        
        TooltipModule,
        ButtonModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Tooltip arrow customized' cssClass='custom-tip'>
            Show tooltip
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }

    .custom-tip.e-tooltip-wrap {
        padding: 4px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
      height: 20px;
      width: 12px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
      height: 20px;
      width: 12px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
      height: 12px;
      width: 20px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
      height: 12px;
      width: 20px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 20px solid #616161;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
      border-bottom: 20px solid #616161;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
      border-bottom: 6px solid transparent;
      border-right: 20px solid #616161;
      border-top: 6px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
      border-bottom: 6px solid transparent;
      border-left: 20px solid #616161;
      border-top: 6px solid transparent;
    }
    `],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip customization

The complete look and feel of the Tooltip can be customized by changing its background color, opacity, content font, etc.
The following code example demonstrates how to achieve this customization.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'



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

@Component({
imports: [
        
        TooltipModule
    ],


standalone: true,
    selector: 'my-app',
    template: `<ejs-tooltip id="tooltip" content='Tooltip customized' cssClass='customtooltip'>
            Show tooltip
    </ejs-tooltip>
    `,
    styleUrls: ['styles.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';

#loader {
  color: #008cff;
  position: absolute;
  top: 45%;
  left: 45%;
  width: 30%;
  height: 40px;
}

#tooltip {
  display: block;
  background-color: #cfd8dc;
  border: 3px solid #eceff1;
  box-sizing: border-box;
  margin: 80px auto;
  padding: 20px 0;
  width: 200px;
  text-align: center;
  color: #424242;
  font-size: 20px;
}

/* csslint ignore:start */
.customtooltip.e-tooltip-wrap {
  border-radius: 4px;
  opacity: 1;
}

.customtooltip.e-tooltip-wrap.e-popup {
  background-color: #fff;
  border: 2px solid #000;
}

.customtooltip.e-tooltip-wrap .e-tip-content {
  color: #000;
  font-size: 12px;
  line-height: 20px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip {
  position: absolute;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom,
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
  height: 12px;
  width: 24px;
  left: 50%;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
  top: 100%;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
  top: -9px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left,
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
  height: 24px;
  width: 12px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
  left: -9px;
  top: 48%;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
  left: 100%;
  top: 50%;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer {
  border: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
  border-top-color: #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
  border-bottom-color: #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
  border-right-color: #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
  border-left-color: #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
  color: #fff;
  font-size: 25.9px;
}

/* csslint ignore:end */
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));