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.
- $(function() {
- $("#tooltipContainer").dxTooltip({
- target: "#image",
- showEvent: 'dxhoverstart',
- contentTemplate: function (contentElement) {
- contentElement.append(
- $("<p />").text("Static content"),
- $("<div />").attr("id", "switchContainer").dxSwitch({
- // The "Switch" widget is configured here
- })
- )
- }
- });
- });
- <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
- <div id="tooltipContainer"></div>
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" />
- <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() {
- var tooltip = $("#tooltipContainer").dxTooltip({
- target: "#image",
- showEvent: 'dxhoverstart',
- hideEvent: 'dxhoverend',
- contentTemplate: 'template1'
- }).dxTooltip("instance");
- $("#buttonContainer").dxButton({
- text: "Change the Template",
- onClick: function (e) {
- var currentTemplate = tooltip.option("contentTemplate");
- tooltip.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
- }
- });
- });
- #buttonContainer {
- display: block;
- width: 200px
- }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.