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.
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>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 * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
class App extends React.Component<{}, {}> {
componentDidMount() {
const circle = this.refs.circle;
const tri = this.refs.tri;
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();
}
}
render() {
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',
'stroke-width': '5',
'stroke-opacity': '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',
'stroke-width': '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',
'stroke-width': '4',
}}
/>
</svg>
</div>
<div
className="circletool"
id="circleShape"
style={{ top: '16%', left: '72%', position: 'absolute' }}
>
<canvas
id="circle"
ref="circle"
className="shape"
width="60"
height="60"
/>
</div>
<div
className="circletool"
id="triShape"
style={{ top: '73%', left: '76%' }}
>
<canvas
id="triangle"
ref="tri"
className="shape"
width="100"
height="50"
/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('sample'));<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#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;
}import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
componentDidMount() {
const circle = this.refs.circle;
const tri = this.refs.tri;
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();
}
}
render() {
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',
'stroke-width': '5',
'stroke-opacity': '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',
'stroke-width': '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',
'stroke-width': '4',
}}/>
</svg>
</div>
<div className="circletool" id="circleShape" style={{ top: '16%', left: '72%', position: 'absolute' }}>
<canvas id="circle" ref="circle" className="shape" width="60" height="60"/>
</div>
<div className="circletool" id="triShape" style={{ top: '73%', left: '76%' }}>
<canvas id="triangle" ref="tri" className="shape" width="100" height="50"/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));