New to Kendo UI for jQuery? Download free 30-day trial

Templates

The Kendo UI Popover widget for jQuery allows you to use templates to set its body and header contents.

Apart from setting the Popover body and header as strings or functions, you can use the Kendo UI Templates to render the body and header of the Popover.

The following example demonstrates how to set templates for the Popover body and header.

<div id="target" class="k-group">Target</div>
<script>
    $(document).ready(function () {
        $("#target").kendoPopover({
            showOn: "click",
            width: "330px",
            position: "right",
            header: kendo.template($("#header-template").html()),
            body: kendo.template($("#body-template").html()),
        });
    });
</script>

<script id="header-template" type="text/x-kendo-template">
    <h1>Header</h1>
</script>

<script id="body-template" type="text/x-kendo-template">
    <div class="template-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</script>

See Also

In this article