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.
<ejs-tooltip cssClass='e-tooltip-css' content='SVG Square' target='#square'>
<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>
</ejs-tooltip>
** Canvas **
Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas circle.
<ejs-tooltip cssClass='e-tooltip-css' content='Canvas Circle' target='#circle'>
<canvas #circle id="circle" class="shape" width="60" height="60"></canvas>
</ejs-tooltip>
import { Component, ViewChild, ViewEncapsulation, ElementRef } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
@Component({
selector: 'my-app',
template: `
<div id="box">
<div class="circletool" id="rectShape" style="left:1%;top:10%">
<ejs-tooltip cssClass='e-tooltip-css' content='SVG Square' target='#square'>
<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>
</ejs-tooltip>
</div>
<div class="circletool" id="ellipseShape" style="top:63%;">
<ejs-tooltip cssClass='e-tooltip-css' content='SVG Ellipse' target='#ellipse'>
<svg>
<ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40" style="fill:#0450C2;stroke:none;stroke-width:2" />
</svg>
</ejs-tooltip>
</div>
<div class="circletool" id="polyShape" style="top:25%;left:40%">
<ejs-tooltip cssClass='e-tooltip-css' content='SVG Polyline' target='#polyline'>
<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>
</ejs-tooltip>
</div>
<div class="circletool" id="circleShape" style="top:16%;left:72%">
<ejs-tooltip cssClass='e-tooltip-css' content='Canvas Circle' target='#circle'>
<canvas #circle id="circle" class="shape" width="60" height="60"></canvas>
</ejs-tooltip>
</div>
<div class="circletool" id="triShape" style="top:73%;left:76%">
<ejs-tooltip cssClass='e-tooltip-css' content='Canvas Triangle' target='#triangle'>
<canvas #triangle id="triangle" class="shape" width="100" height="50"></canvas>
</ejs-tooltip>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public context: any;
public circlecontext: any;
@ViewChild('triangle')canvasRef: ElementRef;
@ViewChild('circle')circleRef: ElementRef;
ngOnInit(){
if (this.canvasRef.nativeElement.getContext) {
this.context = this.canvasRef.nativeElement.getContext('2d');
this.context.beginPath();
this.context.moveTo(0, 50);
this.context.lineTo(100, 50);
this.context.lineTo(50, 0);
this.context.fillStyle = "#FDA600";
this.context.fill();
}
this.circlecontext = this.circleRef.nativeElement.getContext('2d');
let centerX: number = this.circleRef.nativeElement.width / 2;
let centerY: number = this.circleRef.nativeElement.height / 2;
let radius: number = 30;
this.circlecontext.beginPath();
this.circlecontext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
this.circlecontext.fillStyle = '#0450C2';
this.circlecontext.fill();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TooltipModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
@media (max-width: 500px) {
#rectShape {
/* csslint ignore:start */
left: -8% !important;
/* csslint ignore:end */
}
#ellipseShape {
/* csslint ignore:start */
left: -15% !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;
margin: 40px 15px;
background: #ffffff;
box-sizing: border-box;
height: 350px;
position: relative;
}
.circletool {
position: absolute;
}