Specifying the Content Template
The following code shows how to create a template consisting of static (text) and dynamic (the Switch UI component) content:
jQuery
$(function() { $("#tooltipContainer").dxTooltip({ target: "#image", showEvent: 'dxhoverstart', contentTemplate: function (contentElement) { contentElement.append( $("<p />").text("Static content"), $("<div />").attr("id", "switchContainer").dxSwitch({ // The "Switch" UI component is configured here }) ) } }); });
<img id="image" src="https://url/to/an/image" /> <div id="tooltipContainer"></div>
Angular
<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 ], // ... })
Vue
<template> <div> <img id="image" src="https://url/to/an/image" /> <DxTooltip target="#image" show-event="dxhoverstart"> <template> <p>Static content</p> <dx-switch> <!-- The "Switch" UI component is configured here --> </dx-switch> </template> </DxTooltip> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTooltip } from 'devextreme-vue/tooltip'; import { DxSwitch } from 'devextreme-vue/switch'; export default { components: { DxTooltip, DxSwitch } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Tooltip } from 'devextreme-react/tooltip'; import { Switch } from 'devextreme-react/switch'; const renderContent = () => { return ( <p>Static content</p> <Switch> {/* The "Switch" UI component is configured here */} </Switch> ); } class App extends React.Component { render() { return ( <div> <img id="image" src="https://url/to/an/image" /> <Tooltip target="#image" showEvent="dxhoverstart" contentRender={renderContent} /> </div> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Tooltip() .Target("#image") .ShowEvent("dxhoverstart") .ContentTemplate(@<text> <p>Static content</p> @(Html.DevExtreme().Switch() // The "Switch" UI component is configured here ) </text>) ) <img id="image" src="https://url/to/an/image" />
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.
jQuery
<img id="image" src="https://url/to/an/image" /> <div id="buttonContainer"></div> <div id="tooltipContainer"> <div data-options="dxTemplate: { name: 'template1' }"> <p>First template</p> </div> <div data-options="dxTemplate: { name: 'template2' }"> <p>Second template</p> </div> </div>
$(function() { const tooltip = $("#tooltipContainer").dxTooltip({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', contentTemplate: 'template1' }).dxTooltip("instance"); $("#buttonContainer").dxButton({ text: "Change the Template", onClick: function (e) { const currentTemplate = tooltip.option("contentTemplate"); tooltip.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1"); } }); });
#buttonContainer { display: block; width: 200px }
Angular
<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 }
Vue
<template> <div> <img id="image" src="https://url/to/an/image" /> <DxTooltip target="#image" show-event="dxhoverstart" hide-event="dxhoverend" :contentTemplate="currentTemplate"> <template #template1> <p>First template</p> </template> <template #template2> <p>Second template</p> </template> </DxTooltip> <DxButton id="buttonContainer" text="Change the Template" @click="changeTemplate" /> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTooltip } from 'devextreme-vue/tooltip'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxTooltip, DxButton }, data() { return { currentTemplate: "template1" }; }, methods: { changeTemplate () { this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1'); } } } </script> <style> #buttonContainer { display: block; width: 200px } </style>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Tooltip } from 'devextreme-react/tooltip'; import { Button } from 'devextreme-react/button'; const firstTemplate = () => { return ( <p>First template</p> ); } const secondTemplate = () => { return ( <p>Second template</p> ); } class App extends React.Component { constructor(props) { super(props); this.state = { renderContent: firstTemplate }; this.changeTemplate = this.changeTemplate.bind(this); } changeTemplate() { this.setState({ renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate }); } render() { return ( <div> <img id="image" src="https://url/to/an/image" /> <Tooltip target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" contentRender={this.state.renderContent} /> <Button id="buttonContainer" text="Change the Template" onClick={this.changeTemplate} /> </div> ); } } export default App;
#buttonContainer { display: block; width: 200px }
ASP.NET MVC Controls
@(Html.DevExtreme().Tooltip() .ID("tooltip") .Target("#image") .ShowEvent("dxhoverstart") .HideEvent("dxhoverend") .ContentTemplate(new TemplateName("template1")) ) @using (Html.DevExtreme().NamedTemplate("template1")) { <p>First template</p> } @using (Html.DevExtreme().NamedTemplate("template2")) { <p>Second template</p> } <img id="image" src="https://url/to/an/image" /> @(Html.DevExtreme().Button() .ID("changeTemplateButton") .Text("Change the Template") .OnClick("changeTemplateButton_click") ) <script type="text/javascript"> function changeTemplateButton_click() { const tooltip = $("#tooltip").dxTooltip("instance"); const currentTemplate = tooltip.option("contentTemplate"); tooltip.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1")); } </script>
#changeTemplateButton { display: block; width: 200px }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.