Display Tooltip on SVG and canvas elements

17 Feb 20228 minutes 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.

CSHTML

<div id="container">
        <div id="box" class="e-prevent-select">
            <ejs-tooltip id="tooltip01" content="SVG Square" target=".circletool">
                <e-content-template>
                    <div class="circletool" id="rectShape" style="left:1%;top:10%">
                        <svg>
                            <rect id="square" class="shape" x="50" y="20" width="50" height="50" style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9" />
                        </svg>
                    </div>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip02" content="SVG Ellipse" target=".circletool">
                <e-content-template>
                    <div class="circletool" id="ellipseShape" style="top:65%;">
                        <svg>
                            <ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40" style="fill:#0450C2;stroke:none;stroke-width:2" />
                        </svg>
                    </div>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip03" content="SVG PolyShape" target=".circletool">
                <e-content-template>
                    <div class="circletool" id="polyShape" style="top:25%;left:40%">
                        <svg>
                            <polyline id="polyline" class="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>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip04" content="Canvas Circle" target=".circletool">
                <e-content-template>
                    <div class="circletool" id="circleShape" style="top:16%;left:72%">
                        <canvas id="circle" class="shape" width="60" height="60"></canvas>
                    </div>
                </e-content-template>
            </ejs-tooltip>
            <ejs-tooltip id="tooltip05" content="Canvas Triangle" target=".circletool">
                <e-content-template>
                    <div class="circletool" id="triShape" style="top:73%;left:76%">
                        <canvas id="triangle" class="shape" width="100" height="50"></canvas>
                    </div>
                </e-content-template>
            </ejs-tooltip>
        </div>
    </div>



<script>

    window.onload = function () {
        var canvas = document.getElementById('triangle');
        var context;
        if (canvas.getContext) {
            context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(0, 50);
            context.lineTo(100, 50);
            context.lineTo(50, 0);
            context.fillStyle = "#FDA600";
            context.fill();
        }
        canvas = document.getElementById('circle');
        context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY  = canvas.height / 2;
        var radius = 30;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = '#0450C2';
        context.fill();

    };
</script>

<style>
@@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 {
  border: 1px solid #dddddd;
  background: #ffffff;
  box-sizing: border-box;
  height: 320px;
  position: relative;
}

.circletool {
  position: absolute;
}
</style>

Svg-canvas.cs

public ActionResult MouseTrailing()
{
    return View();
}