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>