Display tooltip on svg and canvas elements in React Tooltip component
18 Jan 202324 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.
<TooltipComponent content='SVG Square' cssClass='e-tooltip-css' target= '#square'>
</TooltipComponent>Canvas
Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas circle.
<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';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
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';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
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'));