Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The Tooltip component content can be loaded through template support. Refer to the below code snippet.
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ejs-tooltip style="display:block;position:absolute;left:calc( 50% - 60px);top:45%;">
<button ejs-button >Show Tooltip</button>
<ng-template #content >
Tooltip content here!!!
</ng-template>
</ejs-tooltip>
`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TooltipModule, ButtonModule
],
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%;
}
.tooltipContent {
margin: 50px;
}
#container {
height: 380px;
}
.text {
text-transform: capitalize;
width: 155px;
}
.header {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
padding-bottom: 2px;
margin: 4px -7px 7px -7px;
padding-right: 5px;
padding-left: 6px;
font-weight: bold;
height: 18px;
border-bottom: 1px solid white;
}