HelpBot Assistant

How can I help you?

Customization in Angular Tooltip component

26 Feb 20269 minutes to read

Customize the tooltip using the cssClass property, which accepts custom CSS class names to define user-defined styles and themes.

Tip pointer customization

Style the tip pointer’s size, background, and border colors using the cssClass property.

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

Customize the complete appearance of the tooltip by changing its background color, opacity, content font, and more. The following code example demonstrates 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/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.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));