Search results

Display tooltip on SVG and canvas elements

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: any = this.refs.circle;
    const tri: any = 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",
                            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"
                        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",
            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" 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