Search results

Display tooltip on SVG and canvas elements in React Tooltip component

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>
Source
Preview
index.tsx
index.html
index.css
index.jsx
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'));
Contents
Contents