Specifying the Content Template
The template implementation depends on the used framework or library. Examples of jQuery, Angular, and ASP.NET MVC are presented below. They show how to create a template consisting of static (text) and dynamic (the Switch widget) content.
- <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
- <dx-tooltip
- target="#image"
- showEvent="dxhoverstart"
- contentTemplate="tooltipContent">
- <div *dxTemplate="let data of 'tooltipContent'">
- <p>Static content</p>
- <dx-switch>
- <!-- The "Switch" widget 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 option's value.
- <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.