Customize the Title

By default, the Popover is displayed without a title. To add it, set the showTitle option to true and specify the title text using the title option. The title can contain a button that closes the Popover. To enable it, assign true to the showCloseButton option.

JavaScript
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        title: "Popover Title",
        showTitle: true,
        showCloseButton: true
    });
});

If you need to define the title completely, specify a template for it. To do this, you can use the DevExtreme dxTemplate markup component...

HTML
JavaScript
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<div id="popoverContainer">
    <p>Popover content</p>
    <div data-options="dxTemplate: { name: 'title' }">
        <p>Title template</p>
    </div>
</div>
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: "dxhoverstart",
        hideEvent: "dxhoverend",
        showTitle: true,
        titleTemplate: "title"
    });
});

... or you can combine the HTML markup for the template directly in the titleTemplate function. Note that this function will be called only once - when the Popover appears for the first time.

HTML
JavaScript
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<div id="popoverContainer">
    <p>Popover content</p>
</div>
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        showTitle: true,
        titleTemplate: function () {
            return $("<p />").text("Title content");
        }
    });
});

Just as you switch content templates on-the-fly, so can you do the same with title templates.

HTML
JavaScript
CSS
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<div id="buttonContainer"></div>
<div id="popoverContainer">
    <p>Popover content</p>
    <div data-options="dxTemplate: { name: 'titleTemplate1' }">
        <p>First title template</p>
    </div>
    <div data-options="dxTemplate: { name: 'titleTemplate2' }">
        <p>Second title template</p>
    </div>
</div>
$(function() {
    var popover = $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        showTitle: true,
        titleTemplate: 'titleTemplate1'
    }).dxPopover("instance");

    $("#buttonContainer").dxButton({
        text: "Change the Template", 
        onClick: function (e) {
            if (popover.option("titleTemplate") == "titleTemplate1") {
                popover.option("titleTemplate", "titleTemplate2");
            } else {
                popover.option("titleTemplate", "titleTemplate1");
            }
        } 
    });
});
#buttonContainer {
    display: block;
    width: 200px
}
See Also