How to set tooltip to commands in Angular Toolbar

26 Sep 20262 minutes to read

The tooltipText property of the Angular Toolbar item sets the native HTML title attribute on each command, which displays a hint text on mouse hover. This delivers lightweight OS-level tooltips with no additional dependencies.

To upgrade to a richer, themed Syncfusion Tooltip (with configurable positioning, animation, content templates, etc.) instead of the native browser tooltip:

  • Import the TooltipModule from @syncfusion/ej2-angular-popups and add it to the standalone component’s imports array.
  • Initialize the Tooltip with the Angular Toolbar root element as the target, for example using the Angular Toolbar’s created event.

Refer to the following code example:

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



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

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


standalone: true,
    selector: 'app-container',
    template: `
        <ejs-tooltip id="Tooltip" target='#Toolbar [title]'>
          <ejs-toolbar id='Toolbar'>
            <e-items>
              <e-item text='Cut' tooltipText = 'Cut'></e-item>
              <e-item text='Copy' tooltipText = 'Copy'></e-item>
              <e-item text='Paste' tooltipText = 'Paste'></e-item>
              <e-item text='Undo' tooltipText = 'Undo'></e-item>
              <e-item text='Redo' tooltipText = 'Redo'></e-item>
              </e-items>
          </ejs-toolbar>
        </ejs-tooltip>
        `
})

export class AppComponent {
    @ViewChild('element') element?: any;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));