Dynamic tooltip content with html elements in Angular Tooltip component

27 Sep 20232 minutes to read

The Tooltip component loads HTML tags using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

Here, Bold, Italic, Underline, and Anchor tags are used.

app.component.ts

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id="content">
        <h2>HTML Tags</h2>
          Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
      </div>
      <div class="tooltipContent">
        <ejs-tooltip #tooltip id="tooltip" position='BottomCenter'>
          <ng-template #content>
            <div>
              Through templates,<b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
            </div>
          </ng-template>
          <input ejs-button type="button" class="text" id="Title" value="HTML(With Title)" />
        </ejs-tooltip>
      </div>
    `,
    encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);