React Popover - 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 UI component) content.

jQuery
HTML
JavaScript
<img id="image" src="https://url/to/an/image" />
<div id="popoverContainer"></div>
$(function() {
    $("#popoverContainer").dxPopover({
        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
                })
            )
        }
    });
});
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-popover
    target="#image"
    showEvent="dxhoverstart"
    contentTemplate="popoverContent">
    <div *dxTemplate="let data of 'popoverContent'">
        <p>Static content</p>
        <dx-switch>
            <!-- The "Switch" UI component is configured here -->
        </dx-switch>
    </div>
</dx-popover>
import { DxPopoverModule, DxSwitchModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPopoverModule,
        DxSwitchModule
    ],
    // ...
})
Vue
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxPopover 
            target="#image"
            show-event="dxhoverstart">
            <template>
                <p>Static content</p>
                <dx-switch>
                    <!-- The "Switch" UI component is configured here -->
                </dx-switch>
            </template>
        </DxPopover>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxPopover } from 'devextreme-vue/popover';
import { DxSwitch } from 'devextreme-vue/switch';

export default {
    components: {
        DxPopover,
        DxSwitch
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Popover } from 'devextreme-react/popover';
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" />
                <Popover
                    target="#image"
                    showEvent="dxhoverstart"
                    contentRender={renderContent}
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover()
    .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 Popover container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

jQuery
HTML
JavaScript
CSS
<img id="image" src="https://url/to/an/image" />
<div id="buttonContainer"></div>
<div id="popoverContainer">
    <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 popover = $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        contentTemplate: 'template1'
    }).dxPopover("instance");

    $("#buttonContainer").dxButton({
        text: "Change the Template", 
        onClick: function (e) {
            const currentTemplate = popover.option("contentTemplate");
            popover.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
        } 
    });
});
#buttonContainer {
    display: block;
    width: 200px
}
Angular
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-popover
    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-popover>
import { DxPopoverModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    currentTemplate: string = "template1";
    changeTemplate () {
        this.currentTemplate = (this.currentTemplate == 'template1' ? 'template2' : 'template1')
    }
}
@NgModule({
    imports: [
        // ...
        DxPopoverModule,
        DxButtonModule
    ],
    // ...
})
#buttonContainer {
    display: block;
    width: 200px
}
Vue
App.vue
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxPopover
            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.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxPopover } from 'devextreme-vue/popover';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxPopover,
        DxButton
    },
    data() {
        return {
            currentTemplate: "template1"
        };
    },
    methods: {
        changeTemplate () {
            this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1')
        }
    }
}
</script>

<style>
#buttonContainer {
    display: block;
    width: 200px
}
</style>
React
App.js
styles.css
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Popover } from 'devextreme-react/popover';
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" />
                <Popover
                    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
Razor C#
CSS
@(Html.DevExtreme().Popover()
    .ID("popover")
    .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 popover = $("#popover").dxPopover("instance");
        const currentTemplate = popover.option("contentTemplate");
        popover.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1"));
    }
</script>
#changeTemplateButton {
    display: block;
    width: 200px
}
See Also