Dynamic tooltip content in Angular Tooltip component

27 Sep 20236 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();
        });
}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Fetch } from '@syncfusion/ej2-base';
import { TooltipComponent, TooltipEventArgs, TooltipModule } from '@syncfusion/ej2-angular-popups';
@Component({
    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();
        });
}
}

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 { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule, RadioButtonModule
    ],
    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);