The Tooltip component loads HTML tags using the content template.
The HTML tags such as <div>
, <span>
, bold
, italic
, underline
, etc., can be used. Style attributes can also be applied with HTML tags.
Here, Bold, Italic, Underline, and Anchor tags are used.
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="content">
<h2>HTML Tags</h2>
Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
</div>
<div class="tooltipContent">
<ejs-tooltip #tooltip id="tooltip" position='BottomCenter'>
<ng-template #content>
<div>
Through templates,<b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
</div>
</ng-template>
<input ejs-button type="button" class="text" id="Title" value="HTML(With Title)" />
</ejs-tooltip>
</div>
`,
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;
}