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

Events

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>

See Also

In this article
Not finding the help you need? Improve this article