Having trouble getting help?
Contact Support
Contact Support
Custom tooltip with dynamic html in Angular Tooltip component
27 Apr 20242 minutes to read
Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content
property, which supports both string and HTML tags.
To load an iframe
element in tooltip, set the required iframe in the content
of tooltip while initializing the tooltip component. Refer to the following code.
content= '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewEncapsulation } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
@Component({
imports: [
TooltipModule,ButtonModule
],
standalone: true,
selector: 'my-app',
template: `
<div id="tooltipContent">
<div class="content">
<ejs-tooltip cssClass='e-tooltip-css' position='BottomCenter' opensOn='Click'>
<!-- iframe element -->
<ng-template #content>
<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
</ng-template>
<button ejs-button class="text" id="iframeContent" cssClass='e-outline' isPrimary=true>Embedded Iframe</button>
</ejs-tooltip>
</div>
</div>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));