Content in EJ2 TypeScript Tooltip control

10 Mar 202512 minutes to read

A text or a piece of information assigned to the Tooltip’s content property will be displayed as the main text stream of the Tooltip. The content can be a string or a template. If the content property is not provided with any specific value, it takes the value assigned to the title attribute of the target element on which the Tooltip was initialized. The content can also be dynamically assigned to the Tooltip via AJAX.

Template content

By default, any text or image can be added to the Tooltip. To customize the Tooltip layout or to create your own visual element on the Tooltip, templates can be utilized.

Refer to the following code example to add formatted HTML content to the Tooltip.

import { Tooltip } from '@syncfusion/ej2-popups';

let tooltipContent: HTMLElement = document.createElement("div");
tooltipContent.innerHTML = "<p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p>";
let tooltip: Tooltip = new Tooltip({
    content: tooltipContent
});
tooltip.appendTo('#target');
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/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'>
        <p>A green home is a type of house designed to be
            <a id="target">
                <u>environmentally friendly</u>
            </a> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As
            green homes
            have become more prevalent we have also seen the emergence of green affordable housing.
        </p>
    </div>
    <style>
        #tooltipContent {
            font-size: 14px;
            padding: 0px 5px;
            font-weight: 400;
            line-height: 1.5;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dynamic content via AJAX

The Tooltip content can be dynamically loaded by making use of an AJAX call. The AJAX request is usually made within the beforeRender event of the Tooltip, and then the Tooltip’s content is assigned the value retrieved on its success.

NOTE

The Tooltip target property includes a unique identifier used to associate Tooltips with specific elements on a webpage or application interface. When setting the Tooltip target value as a GUID (Globally Unique Identifier), ensure the GUID starts with a combination of letters before the numeric portion of the GUID. For example, target: ‘#’ + ‘tooltip’ + ‘96ad88bd-294c-47c3-999b-a9daa3285a05’.

import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups';
import { Ajax } from '@syncfusion/ej2-base';

let tooltip: Tooltip = new Tooltip({
    content: 'Loading...',
    target: '.target',
    position: 'RightCenter',
    beforeRender: onBeforeRender
});
tooltip.appendTo('#targetContainer');

function onBeforeRender(args: TooltipEventArgs): void {
    let ajax: Ajax = new Ajax('https://helpej2.syncfusion.com/documentation/code-snippet/tooltip/ajax-content-cs1/tooltipdata.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.getAttribute('data-content')) {
                    this.content = "<div class='contentWrap'><div>" + result[i].Sports + "</div></div>";
                }
            }
            this.dataBind();
        },
        (reason: any) => {
            this.content = reason;
            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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/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'>
        <h4>National Sports</h4>
        <div id="targetContainer" class="e-prevent-select">
            <div id="countrylist">
                <ul>
                    <li class="target" title="1"><span>Australia</span></li>
                    <li class="target" title="2"><span>Bhutan</span></li>
                    <li class="target" title="3"><span>China</span></li>
                    <li class="target" title="4"><span>Cuba</span></li>
                    <li class="target" title="5"><span>India</span></li>
                    <li class="target" title="6"><span>Switzerland</span></li>
                    <li class="target" title="7"><span>United States</span></li>
                </ul>
            </div>
        </div>
    </div>
    <style>
        #countrylist {
            padding: 5px;
        }

        #countrylist ul {
            border: 1px solid #c4c4c4;
            box-sizing: border-box;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100px;
        }

        #countrylist li {
            padding: 10px;
        }

        #countrylist li:hover {
            background-color: #ececec;
        }

        .contentWrap {
            line-height: 16px;
            padding: 3px 0;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
  width: 350px;
  position: relative;
  left: 50%;
  transform: translateX(-25%);
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}