events.md

title	page_title	description	slug	position
Events	Events	Learn how to handle the events of the Telerik UI PopOver component for {{ site.framework }}.	events_popover	7

Events

The Telerik UI PopOver component for {{ site.framework }} exposes the Hide and Show events. You can handle these events to implement custom functionality.

For a complete example on basic PopOver events, refer to the [demo on using the events of the PopOver](https://demos.telerik.com/{{ site.platform }}/popover/events).

{% if site.core %}

Handling by Handler Name

The following example demonstrates how to subscribe to an event by a handler name.

    @(Html.Kendo().PopOver()
        .For("targetElementSelector")
        .Events(e => e.Show("onShow"))
        ... //Additional configuration
    )

    <script>
        function onShow(e){
            // Handle the Show event that triggers when the PopOver shows.
        }
    </script>

    @addTagHelper *, Kendo.Mvc

    <kendo-popover for="targetElementSelector" on-show="onShow">
        <!-- additional configuration -->
    </kendo-popover>

    <script>
        function onShow(e){
            // Handle the Show event that triggers when the PopOver shows.
        }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to an event by a template delegate.

    @(Html.Kendo().PopOver()
        .For("targetElementSelector")
        .Events(e => e.Show(@<text>
            function() {
                // Handle the Show event inline.
            }
            </text>)
        )
        ... //Additional configuration
    )

    @addTagHelper *, Kendo.Mvc

    <kendo-popover for="targetElementSelector" 
        on-show="function() {
            // Handle the Show event inline.
        }">
        <!-- additional configuration -->
    </kendo-popover>

{% else %} The following example demonstrates how to subscribe to the PopOver events.

    @(Html.Kendo().PopOver()
        .For("targetElementSelector")
        .Events(e => e
            .Show("onShow")
            .Hide("onHide")
        )
    )
    <script>
        function onShow(e) {
            // Handle the Show event that triggers when the PopOver shows.
        }

        function onHide(e) {
            // Handle the Hide event that triggers when the PopOver hides.
        }
    </script>

{% endif %}

Next Steps

• [Using the PopOver Events (Demo)](https://demos.telerik.com/{{ site.platform }}/popover/events)

See Also

• [Using the API of the PopOver for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/popover/api)
• PopOver Server-Side HtmlHelper API {% if site.core %}
• PopOver Server-Side TagHelper API {% endif %}
• PopOver Client-Side API