Display tooltip on svg and canvas elements in React Tooltip component
28 Jan 202524 minutes to read
Tooltip can be displayed on both SVG and Canvas elements. You can attach tooltips directly to <svg> or <canvas> elements to display them on data visualization elements.
SVG
To render a tooltip on an SVG square, first create the SVG square element, then use the following code snippet.
<TooltipComponent content='SVG Square' cssClass='e-tooltip-css' target= '#square'>
</TooltipComponent>Canvas
To render a tooltip on a Canvas circle, first create the canvas circle element, then use the following code snippet.
<TooltipComponent content='Canvas Circle' cssClass='e-tooltip-css' target= '#circle'>
</TooltipComponent>import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();
}, []);
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle = circleRef;
const tri = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX = circle.width / 2;
let centerY = circle.height / 2;
let radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
<TooltipComponent content="Canvas Circle" cssClass="e-tooltip-css" target="#circle">
<TooltipComponent content="Canvas Triangle" cssClass="e-tooltip-css" target="#triangle">
<TooltipComponent content="SVG Square" cssClass="e-tooltip-css" target="#square">
<div id="box" className="e-prevent-select">
<div className="circletool" id="rectShape" style={{ left: "1%", top: "10%" }}>
<svg>
<rect id="square" className="shape" x="50" y="20" width="50" height="50" style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}} />
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
<svg>
<ellipse id="ellipse" className="shape" cx="100" cy="50" rx="20" ry="40" style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}} />
</svg>
</div>
<div className="circletool" id="polyShape" style={{ top: "25%", left: "40%", position: "absolute" }}>
<svg>
<polyline id="polyline" className="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}} />
</svg>
</div>
<div className="circletool" id="circleShape" style={{ top: "16%", left: "72%", position: "absolute" }}>
<canvas id="circle" ref={(circle) => (circleRef = circle)} className="shape" width="60" height="60" />
</div>
<div className="circletool" id="triShape" style={{ top: "73%", left: "76%" }}>
<canvas id="triangle" ref={(tri) => (triRef = tri)} className="shape" width="100" height="50" />
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();
}, [])
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle: any = circleRef;
const tri: any = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX: number = circle.width / 2;
let centerY: number = circle.height / 2;
let radius: number = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (
<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
<TooltipComponent
content="Canvas Circle"
cssClass="e-tooltip-css"
target="#circle"
>
<TooltipComponent
content="Canvas Triangle"
cssClass="e-tooltip-css"
target="#triangle"
>
<TooltipComponent
content="SVG Square"
cssClass="e-tooltip-css"
target="#square"
>
<div id="box" className="e-prevent-select">
<div
className="circletool"
id="rectShape"
style={{ left: "1%", top: "10%" }}
>
<svg>
<rect
id="square"
className="shape"
x="50"
y="20"
width="50"
height="50"
style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}
/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
<svg>
<ellipse
id="ellipse"
className="shape"
cx="100"
cy="50"
rx="20"
ry="40"
style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}}
/>
</svg>
</div>
<div
className="circletool"
id="polyShape"
style={{ top: "25%", left: "40%", position: "absolute" }}
>
<svg>
<polyline
id="polyline"
className="shape"
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}
/>
</svg>
</div>
<div
className="circletool"
id="circleShape"
style={{ top: "16%", left: "72%", position: "absolute" }}
>
<canvas
id="circle"
ref={(circle) => ((circleRef as any) = circle)}
className="shape"
width="60"
height="60"
/>
</div>
<div
className="circletool"
id="triShape"
style={{ top: "73%", left: "76%" }}
>
<canvas
id="triangle"
ref={(tri) => ((triRef as any) = tri)}
className="shape"
width="100"
height="50"
/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();
}, []);
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle = circleRef;
const tri = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX = circle.width / 2;
let centerY = circle.height / 2;
let radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
<TooltipComponent content="Canvas Circle" cssClass="e-tooltip-css" target="#circle">
<TooltipComponent content="Canvas Triangle" cssClass="e-tooltip-css" target="#triangle">
<TooltipComponent content="SVG Square" cssClass="e-tooltip-css" target="#square">
<div id="box" className="e-prevent-select">
<div className="circletool" id="rectShape" style={{ left: "1%", top: "10%" }}>
<svg>
<rect id="square" className="shape" x="50" y="20" width="50" height="50" style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}} />
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
<svg>
<ellipse id="ellipse" className="shape" cx="100" cy="50" rx="20" ry="40" style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}} />
</svg>
</div>
<div className="circletool" id="polyShape" style={{ top: "25%", left: "40%", position: "absolute" }}>
<svg>
<polyline id="polyline" className="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}} />
</svg>
</div>
<div className="circletool" id="circleShape" style={{ top: "16%", left: "72%", position: "absolute" }}>
<canvas id="circle" ref={(circle) => (circleRef = circle)} className="shape" width="60" height="60" />
</div>
<div className="circletool" id="triShape" style={{ top: "73%", left: "76%" }}>
<canvas id="triangle" ref={(tri) => (triRef = tri)} className="shape" width="100" height="50" />
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();
}, [])
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle: any = circleRef;
const tri: any = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX: number = circle.width / 2;
let centerY: number = circle.height / 2;
let radius: number = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (
<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
<TooltipComponent
content="Canvas Circle"
cssClass="e-tooltip-css"
target="#circle"
>
<TooltipComponent
content="Canvas Triangle"
cssClass="e-tooltip-css"
target="#triangle"
>
<TooltipComponent
content="SVG Square"
cssClass="e-tooltip-css"
target="#square"
>
<div id="box" className="e-prevent-select">
<div
className="circletool"
id="rectShape"
style={{ left: "1%", top: "10%" }}
>
<svg>
<rect
id="square"
className="shape"
x="50"
y="20"
width="50"
height="50"
style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}
/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
<svg>
<ellipse
id="ellipse"
className="shape"
cx="100"
cy="50"
rx="20"
ry="40"
style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}}
/>
</svg>
</div>
<div
className="circletool"
id="polyShape"
style={{ top: "25%", left: "40%", position: "absolute" }}
>
<svg>
<polyline
id="polyline"
className="shape"
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}
/>
</svg>
</div>
<div
className="circletool"
id="circleShape"
style={{ top: "16%", left: "72%", position: "absolute" }}
>
<canvas
id="circle"
ref={(circle) => ((circleRef as any) = circle)}
className="shape"
width="60"
height="60"
/>
</div>
<div
className="circletool"
id="triShape"
style={{ top: "73%", left: "76%" }}
>
<canvas
id="triangle"
ref={(tri) => ((triRef as any) = tri)}
className="shape"
width="100"
height="50"
/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));#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 {
background: #ffffff;
box-sizing: border-box;
height: 320px;
position: relative;
}
.circletool {
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>