Display Tooltip on svg and canvas elements in EJ2 JavaScript 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.js
index.html
index.css
//Render Tooltip component
var square = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Square',
    target: '#square'
});
square.appendTo('#box');

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

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

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

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

triangle.appendTo('#box');
var canvas = document.getElementById('triangle');
var 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');
context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <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"></rect>
        </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"></ellipse>
        </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"></polyline>
        </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>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
  <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%;
}