Content in Angular Tooltip component

21 Dec 2022 / 3 minutes to read

A text or a piece of information assigned to the Tooltip’s content property will be displayed as the main text stream of the Tooltip. It can be a string or a template content. If the content property is not provided with any specific value, then it takes the value assigned to the title attribute of the target element on which the Tooltip was initialized. The content can also dynamically be assigned to the Tooltip via AJAX.

Template content

Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or to create your own visualized element on the Tooltip, template can be used.

Tooltip template content can be rendered using the ng-template. If needed it can be rendered using the HTML elements also.

The following sample demonstrates how to add content template in tooltip.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <span>Using ng-template</span>
    <p>A green home is a type of house designed to be
        <ejs-tooltip id='tooltip_1'>
            <ng-template #content>
                <h3>Template Content</h3>
                <p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p>
            </ng-template>
            <a><u>environmentally friendly</u></a>
        </ejs-tooltip> and sustainable. And also focuses on the efficient use of "energy, water, and building materials."
    </p>
    <span>Using HTML Elements</span>
    <p>
        As
        <ejs-tooltip id='tooltip_2' [content]='tooltipContent'>
            <a><u>green homes</u></a>
        </ejs-tooltip>
        have become more prevalent we have also seen the emergence of green affordable housing.
    </p>
    `
})

export class AppComponent {
    tooltipContent: HTMLElement = document.createElement('div');
    constructor() {
        this.tooltipContent = '<h3>HTML Content</h3><p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p>'
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * 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%;
}
#tool {
  width: 500px;
  margin: auto;
 transform: translateX(10%);
}
#details table th,
#details table td {
  padding: 20px 10px;
  text-align: left;
}

#details .info {
  font-size: 14px;
  text-align: left;
  font-weight: 500;
}

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Dynamic content via AJAX

The Tooltip content can be dynamically loaded by making use of the AJAX call. The AJAX request is usually made within the beforeRender event of the Tooltip, and then the Tooltip’s content is assigned the value retrieved on it’s success.