Search results

Dynamic tooltip content with HTML elements in Angular Tooltip component

22 Oct 2021 / 1 minute to read

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
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 {
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#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;
  }