How to set tooltip to commands in Angular Toolbar

31 Aug 20262 minutes to read

The tooltipText property of the 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 Toolbar root element as the target, for example using the 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';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));