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:
Tooltip
module from ej2-popups
,and initialize the Tooltip with the Toolbar target. Refer to the following code example:import { Component, ViewChild } from '@angular/core';
@Component({
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;
}
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 { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule, TooltipModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);