Search results

Display tooltip on SVG and canvas elements in React Tooltip component

30 Jan 2023 / 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
App.jsx
index.jsx
index.html
index.css
App.tsx
index.tsx
Copied to clipboard
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;
Copied to clipboard
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'));
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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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 { 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;
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';

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'));
Contents
Contents