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

Templates

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

Demo page for the Popover Templates

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>

Templates

See Also