Creating dynamic HTML Tooltips in Angular

8 Jan 20252 minutes to read

Tooltip loads HTML pages via the 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. Here’s an example of setting an iframe as the content of a Tooltip:

content= '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>

app.component.ts

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 #tooltip id="tooltip" cssClass='e-tooltip-css' position='BottomCenter' opensOn='Click'>
                <!-- iframe element -->
                 <ng-template #content>
                 <iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></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 {
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));