Angular Tooltip - Customize the Content

Specifying the Content Template

The following code shows how to create a template consisting of static (text) and dynamic (the Switch UI component) content:

HTML
TypeScript
  • <img id="image" src="https://url/to/an/image" />
  • <dx-tooltip
  • target="#image"
  • showEvent="dxhoverstart"
  • contentTemplate="tooltipContent">
  • <div *dxTemplate="let data of 'tooltipContent'">
  • <p>Static content</p>
  • <dx-switch>
  • <!-- The "Switch" UI component is configured here -->
  • </dx-switch>
  • </div>
  • </dx-tooltip>
  • import { DxTooltipModule, DxSwitchModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTooltipModule,
  • DxSwitchModule
  • ],
  • // ...
  • })

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the Tooltip container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

HTML
TypeScript
CSS
  • <img id="image" src="https://url/to/an/image" />
  • <dx-button
  • id="buttonContainer"
  • text="Change the Template"
  • (onClick)="changeTemplate()">
  • </dx-button>
  • <dx-tooltip
  • target="#image"
  • showEvent="dxhoverstart"
  • hideEvent="dxhoverend"
  • [contentTemplate]="currentTemplate">
  • <div *dxTemplate="let data of 'template1'">
  • <p>First template</p>
  • </div>
  • <div *dxTemplate="let data of 'template2'">
  • <p>Second template</p>
  • </div>
  • </dx-tooltip>
  • import { DxTooltipModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • currentTemplate: string = "template1";
  • changeTemplate () {
  • this.currentTemplate = (this.currentTemplate == 'template1' ? 'template2' : 'template1')
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTooltipModule,
  • DxButtonModule
  • ],
  • // ...
  • })
  • #buttonContainer {
  • display: block;
  • width: 200px
  • }
See Also