Content in Angular Tooltip component

26 Feb 202610 minutes to read

Text or information assigned to the Tooltip’s content property displays as the main content of the Tooltip.

The content can be a string or template. If no specific value is provided, the tooltip uses the title attribute of the target element. Content can also be dynamically assigned to the tooltip via AJAX.

Template content

Add text or images to the tooltip by default. Use template to customize the tooltip layout or create custom visualized elements.

Render tooltip template content using ng-template or HTML elements as needed.

The following sample demonstrates how to add a content template to the tooltip.

app.component.ts

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 { Component } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <h3>Using ng-template</h3>
    <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>
    <h3>Using HTML Elements</h3>
    <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 as any).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>'
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Load dynamic tooltip content

Load tooltip content dynamically using the Fetch API. Make the Fetch request within the beforeRender event and assign the retrieved value to the tooltip’s content property.

The tooltip target property includes a unique identifier to associate tooltips with specific elements. When setting a GUID as the target value, ensure the GUID starts with letters before the numeric portion. For example: target: ‘#tooltip’ + ‘96ad88bd-294c-47c3-999b-a9daa3285a05’.

app.component.ts

/**
 * Loading ajax content sample
 */

import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
import { TooltipComponent, TooltipModule, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
import { HttpClient } from '@angular/common/http';
import { Fetch } from '@syncfusion/ej2-base';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
        <div id="tool">
        <h4>National Sports</h4>
        <ejs-tooltip #tooltip id="tooltip" class="e-prevent-select" content='Loading...' target="#countryList [title]"
         position='RightCenter' (beforeRender)="onBeforeRender($event)">
            <div id="countryList">
                <ul>
                    <li class="target" title="1"><span>Australia</span></li>
                    <li class="target" title="2"><span>Bhutan</span></li>
                    <li class="target" title="3"><span>China</span></li>
                    <li class="target" title="4"><span>Cuba</span></li>
                    <li class="target" title="5"><span>India</span></li>
                    <li class="target" title="6"><span>Switzerland</span></li>
                    <li class="target" title="7"><span>United States</span></li>
                </ul>
            </div>
        </ejs-tooltip>
        </div>
        `,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [TooltipModule, ListViewModule, HttpClientModule],
})
export class AppComponent {
  //Define an Array of JSON data
  public listViewData: { [key: string]: Object }[] = [
    { id: '1', text: 'Australia' },
    { id: '2', text: 'Bhutan' },
    { id: '3', text: 'China' },
    { id: '4', text: 'Cuba' },
    { id: '5', text: 'India' },
    { id: '6', text: 'Switzerland' },
    { id: '7', text: 'United States' },
  ];

  //Map appropriate columns to fields property
  public fields: Object = { text: 'text', tooltip: 'id' };

  @ViewChild('tooltip')
  public tooltipControl!: TooltipComponent;

  constructor(@Inject(HttpClient) public http: HttpClient) {}

  /**
   * Process tooltip ajax content.
   */

  onBeforeRender(args: TooltipEventArgs) {

    let fetchApi = new Fetch(
      'https://ej2.syncfusion.com/angular/demos/source/tooltip/tooltipdata.json',
      'GET'
    );
    fetchApi.onSuccess = (data: any) => {
      for (var i = 0; i < data.length; i++) {
        if (data[i].Id === args.target.getAttribute('data-content')) {
          /* tslint:disable */
          this.tooltipControl.content =
            "<div class='contentWrap'><span class=" +
            data[i].Class +
            "></span><div class='def'>" +
            data[i].Sports +
            '</div></div>';
          /* tslint:enable */
        }
      }
    };
    fetchApi.send();  
  }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';

#countryList {
    padding: 5px;
}

#countryList ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    border: 1px solid #c4c4c4;
}

#countryList li {
    padding: 10px;
}

#countryList li:hover {
    background-color: #ececec;
}

.contentWrap {
    padding: 3px 0;
    line-height: 16px;
}

.def {
    float: right;
}
#tool {
    width: 350px;
    position: relative;
    left: 50%;
    transform: translateX(-25%);
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));