Dynamic tooltip content in Angular Tooltip component
27 Apr 20246 minutes to read
The tooltip content can be changed dynamically using the Fetch request.
The Fetch request should be made within the beforeRender
event of the tooltip. On every success, the corresponding retrieved data will be set to the content property of the tooltip.
When you hover over the icons, its respective data will be retrieved dynamically and then assigned to the tooltip’s content.
Refer to the following code snippet to change the tooltip content dynamically.
onBeforeRender(args: TooltipEventArgs): void {
this.content = 'Loading...';
this.dataBind();
let fetchApi: Fetch = new Fetch('./tooltip.json', 'GET');
fetchApi.send().then(
(result: any) => {
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
this.content = result[i].Name;
/* tslint:enable */
}
}
this.dataBind();
},
(reason: any) => {
this.content = reason.message;
this.dataBind();
});
}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { Fetch } from '@syncfusion/ej2-base';
import { TooltipComponent, TooltipEventArgs, TooltipModule } from '@syncfusion/ej2-angular-popups';
@Component({
imports: [
TooltipModule, RadioButtonModule
],
standalone: true,
selector: 'my-app',
template: `
<div id="tool">
<h2> Dynamic Tooltip content </h2>
<ejs-tooltip #tooltip id='tooltip' content='Loading...' target=".circletool" [showTipPointer]='false' (beforeRender)="onBeforeRender($event)">
<div id="box">
<div id='1' class="circletool bold-01"></div>
<div id='2' class="circletool italic"></div>
<div id='3' class="circletool underline-02"></div>
<div id='4' class="circletool cut-02"></div>
<div id='5' class="circletool copy"></div>
<div id='6' class="circletool paste"></div>
</div>
</ejs-tooltip>
</div>
`,
})
export class AppComponent {
@ViewChild('tooltip')
public tooltipControl: TooltipComponent | any;
constructor(){}
onBeforeRender(args: TooltipEventArgs): void {
this.tooltipControl.content = 'Loading...';
this.tooltipControl.dataBind();
let fetchApi: Fetch = new Fetch('./tooltipdata.json', 'GET');
fetchApi.send().then(
(result: any) => {
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
this.tooltipControl.content = result[i].Name;
/* tslint:enable */
}
}
this.tooltipControl.dataBind();
},
(reason: any) => {
this.tooltipControl.content = reason.message;
this.tooltipControl.dataBind();
});
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));