Dynamic tooltip content in EJ2 TypeScript Tooltip control

The tooltip content can be changed dynamically using the AJAX request.

The AJAX 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.

function onBeforeRender(args: TooltipEventArgs): void {
    this.content = 'Loading...';
    this.dataBind();
    let ajax: Ajax = new Ajax('./tooltip.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            for (let i: number = 0; i < result.length; i++) {
                if (result[i].Id == args.target.id) {
                    /* tslint:disable */
                    this.content = result[i].Sports;
                    /* tslint:enable */
                }
            }
            this.dataBind();
        },
        (reason: any) => {
            this.content = reason.message;
            this.dataBind();
        });
}
import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups';
import { Ajax } from '@syncfusion/ej2-base';

let tooltip: Tooltip = new Tooltip({
    content: 'Loading...',
    target: '.circletool',
    showTipPointer: false,
    beforeRender: onBeforeRender
});

tooltip.appendTo('#box');
function onBeforeRender(args: TooltipEventArgs): void {
    this.content = 'Loading...';
    this.dataBind();
    let ajax: Ajax = new Ajax('./tooltip.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            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();
        });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
      <h2> Dynamic Tooltip content </h2>
      <div id="box" class="e-prevent-select">
            <div id="1" class="circletool bold-01" style="display:inline-block"  ></div>
            <div id="2" class="circletool italic" style="display:inline-block" ></div>
            <div id="3" class="circletool underline-02" style="display:inline-block" ></div>
            <div id="4" class="circletool cut-02" style="display:inline-block" ></div>
            <div id="5" class="circletool copy" style="display:inline-block"></div>
            <div id="6" class="circletool paste" style="display:inline-block"></div>
        </div>
      </div>
</body>

</html>