New to Kendo UI for jQuery? Start a free 30-day trial
Events
Updated over 6 months ago
The Kendo UI Popover exposes the show and hide events which also provide extension points for customization on top of the built-in features.
Showing the Popover
You can subscribe to the show event which fires when a Popover is shown to create a custom logic.
The following example demonstrates how to subscribe to the show event during initialization.
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
$("#target").kendoPopover({
template: "Content",
show: function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("popover is shown");
}
});
});
</script>The following example demonstrates how to subscribe to the show event after initialization.
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
var popover = $("#target").kendoPopover({
template: "Content",
}).data("kendoPopover");
popover.bind("show", function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("popover is shown");
});
});
</script>Hiding the Popover
You can subscribe to the hide event which fires when a Popover is hidden to create customization.
The following example demonstrates how to subscribe to the hide event during initialization.
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
$("#target").kendoPopover({
template: "Content",
hide: function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("popover is hidden!");
}
});
});
</script>
</script>The following example demonstrates how to subscribe to the hide event after initialization.
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
var popover = $("#target").kendoPopover({ template: "Content" }).data("kendoPopover");
popover.bind("hide", function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("popover is hidden!");
});
});
</script>