How to display Tooltip on SVG in EJ2 TypeScript Tooltip

The Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show Tooltip on data visualization components.

SVG

Create an SVG square element and use the following code snippet to render the Tooltip on the SVG square.

let square: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Square',
    target: '#square'
});
square.appendTo('#box');

Canvas

Create the canvas circle element and refer to the following code snippet to render the Tooltip on Canvas circle.

let circle: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Circle',
    target: '#circle'
});
circle.appendTo('#box');
import { Tooltip } from '@syncfusion/ej2-popups';

//Render tooltip component
let square: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Square',
    target: '#square'
});
square.appendTo('#box');

let ellipse: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Ellipse',
    target: '#ellipse'
});
ellipse.appendTo('#box');

let polyline: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Polyline',
    target: '#polyline'
});
polyline.appendTo('#box');

let circle: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Circle',
    target: '#circle'
});
circle.appendTo('#box');

let triangle: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Triangle',
    target: '#triangle'
});

triangle.appendTo('#box');
let canvas: HTMLCanvasElement = document.getElementById('triangle') as HTMLCanvasElement;
let context;
if (canvas.getContext) {
    context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(0, 50);
    context.lineTo(100, 50);
    context.lineTo(50, 0);
    context.fillStyle = "#FDA600";
    context.fill();
}
canvas = document.getElementById('circle') as HTMLCanvasElement;
context = canvas.getContext('2d');
let centerX: number = canvas.width / 2;
let centerY: number = canvas.height / 2;
let radius: number = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#0450C2';
context.fill();
<!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/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/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>
</head>

<body>
  <div id='loader'>Loading....</div>
  <div id="container">
    <div id="box" class="e-prevent-select">
      <div class="circletool" id="rectShape" style="left:1%;top:10%">
        <svg>
          <rect id="square" class="shape" x="50" y="20" width="50" height="50"
            style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9" />
        </svg>
      </div>
      <div class="circletool" id="ellipseShape" style="top:65%;">
        <svg>
          <ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40"
            style="fill:#0450C2;stroke:none;stroke-width:2" />
        </svg>
      </div>
      <div class="circletool" id="polyShape" style="top:25%;left:40%">
        <svg>
          <polyline id="polyline" class="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
            style="fill:#ffffff;stroke:#0450C2;stroke-width:4" />
        </svg>
      </div>
      <div class="circletool" id="circleShape" style="top:16%;left:72%">
        <canvas id="circle" class="shape" width="60" height="60"></canvas>
      </div>
      <div class="circletool" id="triShape" style="top:73%;left:76%">
        <canvas id="triangle" class="shape" width="100" height="50"></canvas>
      </div>
    </div>
  </div>
  <style>
    @media (max-width: 500px) {
      #rectShape {
        /* csslint ignore:start */
        left: -11% !important;
        /* csslint ignore:end */
      }

      #ellipseShape {
        /* csslint ignore:start */
        left: -20% !important;
        /* csslint ignore:end */
      }

      #polyShape {
        /* csslint ignore:start */
        left: 28% !important;
        /* csslint ignore:end */
      }

      #circleShape {
        /* csslint ignore:start */
        left: 68% !important;
        /* csslint ignore:end */
      }

      #triShape {
        /* csslint ignore:start */
        left: 65% !important;
        /* csslint ignore:end */
      }
    }

    @media (min-width: 500px) and (max-width: 600px) {
      #triShape {
        /* csslint ignore:start */
        left: 70% !important;
        /* csslint ignore:end */
      }
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }

    .e-tooltip-css {
      filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
    }

    #control-container {
      /* csslint ignore:start */
      padding: 0 !important;
      /* csslint ignore:end */
    }

    #box {
      border: 1px solid #dddddd;
      background: #ffffff;
      box-sizing: border-box;
      height: 320px;
      position: relative;
    }

    .circletool {
      position: absolute;
    }
  </style>
</body>

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

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