Open the Drawer on Hover

Updated on Sep 16, 2026

Environment

Product

Telerik UI for ASP.NET MVC

Description

The Drawer does not provide a built-in hover option. This article demonstrates a custom approach that opens and closes the Drawer when the pointer enters or leaves the Drawer element.

Solution

Retrieve the initialized Drawer instance and call its show() and hide() methods from mouseenter and mouseleave handlers:

JS

<script>
    $(function () {
        var drawer = $("#drawer").data("kendoDrawer");

        $("#drawer")
            .on("mouseenter", function () {
                drawer.show();
            })
            .on("mouseleave", function () {
                drawer.hide();
            });
    });
</script>

The #drawer element is the hover boundary and also contains the associated content. In overlay mode, the overlay is outside the Drawer element and can interrupt the hover behavior. Provide a click, focus, or keyboard-accessible alternative when using hover to open the Drawer.

See Also

• Drawer Interaction Modes
• Drawer Client-Side API