Search results

Display Tooltip on SVG and canvas elements in JavaScript Tooltip control

22 Oct 2021 / 2 minutes to read

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

SVG

Create the SVG square element and refer to the following code snippet to render the tooltip on SVG square.

Copied to clipboard
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.

Copied to clipboard
let circle: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Circle',
    target: '#circle'
});
circle.appendTo('#box');
Source
Preview
index.ts
index.html
index.css
Copied to clipboard
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

//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();
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</body>

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

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

@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;
}
Contents
Contents