Display Tooltip on svg and canvas elements in EJ2 TypeScript Tooltip control

27 Feb 202510 minutes to read

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');

index.ts
index.html
index.css
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/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="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%;
}