DevExtreme React - Customize the Content

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.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Tooltip()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .ContentTemplate(@<text>
        <p>Static content</p>
        @(Html.DevExtreme().Switch()
            // The "Switch" widget is configured here
        )
    </text>)
)
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />

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.

jQuery
HTML
JavaScript
CSS
<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
}
Angular
HTML
TypeScript
CSS
<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
}
ASP.NET MVC Controls
Razor C#
CSS
@(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://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />

@(Html.DevExtreme().Button()
    .ID("changeTemplateButton")
    .Text("Change the Template")
    .OnClick("changeTemplateButton_click")
)

<script type="text/javascript">
    function changeTemplateButton_click() {
        var tooltip = $("#tooltip").dxTooltip("instance");
        var currentTemplate = tooltip.option("contentTemplate");
        tooltip.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1"));
    }
</script>
#changeTemplateButton {
    display: block;
    width: 200px
}
See Also