Content in Angular Tooltip component
8 Jan 202510 minutes to read
Text or information assigned to the Tooltip’s content property will be displayed as the main content of the Tooltip.
It can be a string or a template content. If no specific value is provided for the content property, it uses the value of 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 ng-template. If needed, it can also be rendered using HTML elements.
The following sample demonstrates how to add content template in Tooltip.
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>'
}
}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
The Tooltip content can be dynamically loaded by making use of the Fetch call. The Fetch 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.
NOTE
The Tooltip target property includes a unique identifier used to associate Tooltips with specific elements on a webpage or application interface. When setting the Tooltip target value as a GUID (Globally Unique Identifier), it’s important to note that the GUID must start with a combination of letters before the numeric portion of the GUID. For example, target: ‘#’ + ‘ tooltip’+ ‘96ad88bd-294c-47c3-999b-a9daa3285a05’.
/**
* 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();
}
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.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%);
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));