Display Tooltip on svg and canvas elements in React Tooltip component
4 Sep 202624 minutes to read
React Tooltips can be displayed on both SVG and Canvas elements. React Tooltips can be attached directly to <svg> or <canvas> elements to display them on data visualization elements.
SVG
To render a React 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 React 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>