Customize Tooltip with dynamic HTML in EJ2 TypeScript Tooltip control

3 Mar 20255 minutes to read

Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property, which supports both strings and HTML tags.

To load an iframe element in Tooltip, set the required iframe in the content of the Tooltip control while initializing it. Refer to the following code snippet:

content: '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>'
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

//Render iframe button
let iframeContent: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
iframeContent.appendTo('#iframeContent');

//Render iframe tooltip
let TooltipContent: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard" id="tooltipFrame"></iframe>',
    position: 'BottomCenter',
    opensOn: 'Click',
    width: '350',
    height: '250',
    enableHtmlSanitizer: false,
});
TooltipContent.appendTo('#iframeContent');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for ListView UI Control" />
    <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-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-maps/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'>
        <div id="tooltipContent">
            <div class="content">
                <!-- iframe element -->
                <button class="text" id="iframeContent">Embedded Iframe</button>
            </div>
        </div>
    </div>
    <style>
        #tooltipContent {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin: 65px 10px;
        }

        .content {
            display: inline-block;
            width: 49%;
        }

        #tooltipFrame {
            width: 332px;
            height: 233px;
        }

        .content button {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .e-tooltip-wrap.e-popup.mapTooltip .e-tip-content {
            padding-top: 5px;
        }
    </style>
</body>

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

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    top: 45%;
    left: 45%;
}