Having trouble getting help?
Contact Support
Contact Support
Dynamic HTML content in Angular Tooltip component
8 Jan 20252 minutes to read
The Tooltip component supports 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 to HTML tags.
Here, Bold, Italic, Underline, and Anchor tags are used.
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, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
imports: [
TooltipModule, ButtonModule
],
standalone: true,
selector: 'my-app',
template: `
<div class="tooltipContent">
<ejs-tooltip #tooltip id="tooltip" position='BottomCenter'>
<ng-template #content>
<h2>HTML Tags</h2>
<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 {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));