Dynamic content with html element in EJ2 TypeScript Tooltip control

3 Mar 20255 minutes to read

The Tooltip control can load HTML content using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

In the example below, Bold, Italic, Underline, and Anchor tags are used.

When using HTML elements as content for a Tooltip, initially set the content element to display: none. Then, within the beforeRender event, you can make the element visible again using the following code:

    document.getElementById('content').style.display = 'block';
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

//Define an array of JSON data
let title: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    position: 'BottomCenter',
    opensOn: 'Hover',
    beforeRender: onBeforeRender,
    content: document.getElementById('tooltip')
});
title.appendTo('#Title');

let btn: Button = new Button();
btn.appendTo('#Title');

function onBeforeRender() {
    let element = document.getElementById('tooltip');
    if (element) {
        element.style.display = 'block';
    }
}
<!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" />
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/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">
    <div id="tooltip">
      <h2>HTML Tags</h2>
      Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline
          HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
    </div>
    <div id="tooltipContent">
      <div class="content">
        <button class="text" id="Title">HTML(With Title)</button>
      </div>
    </div>
  </div>
  <style>
    #tooltipContent table {
      margin: 0 auto;
    }

    #tooltip {
      display: none;
    }

    #tooltipContent {
      display: inline-block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 100px;
    }

    .text {
      text-transform: capitalize;
      width: 155px;
    }

    .header {
      font-family: "Arial Black", Gadget, sans-serif;
      font-size: 12px;
      padding-bottom: 2px;
      margin: 4px -7px 7px -7px;
      padding-right: 5px;
      padding-left: 6px;
      font-weight: bold;
      height: 18px;
      border-bottom: 1px solid white;
    }

    .e-tooltip-css.e-tooltip-wrap .e-tip-content {
      padding: 0 10px 10px 10px;
    }
  </style>
</body>

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

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