Search results

Set Essential JS 2 Tooltip to the commands in Angular Toolbar component

03 Mar 2021 / 1 minute to read

The tooltipText property of the Toolbar item is used to set the HTML Tooltip to the commands that can be viewed as hint texts on mouse hover.

To change the tooltipText to ej2-tooltip component:

  • Import the Tooltip module from ej2-popups,and initialize the Tooltip with the Toolbar target. Refer to the following code example:
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
import { Tooltip } from '@syncfusion/ej2-popups';

@Component({
selector: 'app-container',
template: `
    <div id = 'Tooltip'>
    <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>
    </div>
    `
})

export class AppComponent {
@ViewChild('element') element;

ngAfterViewInit() {
   let tooltip: Tooltip = new Tooltip({
   target: '#Toolbar [title]',
    });
   tooltip.appendTo('#Tooltip');
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ToolbarModule
    ],
    declarations: [AppComponent ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);