Search results

Display tooltip on SVG and canvas elements in React Tooltip component

22 Jul 2021 / 1 minute 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
  <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.

Copied to clipboard
<TooltipComponent content='Canvas Circle' cssClass='e-tooltip-css' target= '#circle'>
  </TooltipComponent>
Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
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'));
Copied to clipboard
<!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>
Copied to clipboard
#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;
  }
Copied to clipboard
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'));
Contents
Contents