Getting Started with the Popover
This guide demonstrates how to get up and running with the Kendo UI for jQuery Popover.
After the completion of this guide, you will be able to achieve the following end result:
<div id="container">
I'm a <strong>target</strong>. I'm also a
<strong>target</strong>.
</div>
<script>
$(document).ready(function() {
$("#container").kendoPopover({
header: "Header",
body: "Kendo Popover Body",
filter: "strong"
});
});
</script>
1. Create a Div Element
First, create a <div> element which will serve to initilize the Popover.
<div id="container">
I'm a <strong>target</strong>. I'm also a
<strong>target</strong>.
</div>
2. Initialize the Popover
In this step, you will initialize the Popover from the div element.
<div id="container">
I'm a <strong>target</strong>. I'm also a
<strong>target</strong>.
</div>
<script>
// Target the div element by using jQuery and then call the kendoPopover() method.
$("#container").kendoPopover();
</script>
3. Specify the Header and Body of the Popover
The Popover allows you to specify a header and a body. Both options can accept either a string or a function.
<div id="container">
I'm a <strong>target</strong>. I'm also a
<strong>target</strong>.
</div>
<script>
$(document).ready(function() {
$("#container").kendoPopover({
header: "Header",
body: "Kendo Popover Body"
});
});
</script>
4. Set the Filter for the Popover
You can specify a selector so that the Popover would appear only for certain parts of the content. In the example, the Popover will appear only for <strong> tags.
<div id="container">
I'm a <strong>target</strong>. I'm also a
<strong>target</strong>.
</div>
<script>
$(document).ready(function() {
$("#container").kendoPopover({
header: "Header",
body: "Kendo Popover Body",
filter: "strong"
});
});
</script>