Search results

Tooltip Content Template in Angular Tooltip component

The Tooltip component content can be loaded through template support. Refer to the below code snippet.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <ejs-tooltip style="display:block;position:absolute;left:calc( 50% - 60px);top:45%;">
            <button ejs-button >Show Tooltip</button>
            <ng-template #content >
              Tooltip content here!!!
            </ng-template>
        </ejs-tooltip>
    `,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule, ButtonModule
    ],
    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);