How to Expand Item on Mouse Over in TreeView Component

By default each item in TreeView component expands only by click on its expand box or if item text is double-clicked. There may be cases when you may need to expand the item by simply hovering over its space. In following section we will show you how to do it.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at

Whenever you move the mouse cursor over item space in this example, the item will auto-expand. This happens only if the mouse cursor hovers over item space within small period of time of 500ms. This delay is to prevent accidentaly expanding items, if you quickly move the mouse cursor over TreeView.

Expand Tree Item on Mouse Over

TreeView has an event called itemHover which is fired only when mouse cursor moves over item space. You can handle this event in your code to get the item that is currently hovered and add some specific action, like expanding the hovered item. This event by default doesn’t do anything. You need to handle it and add our code specifying some action.

In this code, to prevent items from expandingaccidentally, we have set at timeout with delay of 500ms before item is expaded. If the mouse cursor hovers over the item space at least hald a second the item will expand by calling the expand method. Otherwise, the expanding is cancelled and the timer resets.


In some cases, you may need to auto-expand the item when mouse hovers over its space. In TreeView component you can achieve this process by simply handling an event that is fired whenever mouse cursor moves over tree items. To prevent any accidental expanding of tree items you can customize the event handler and add timers that will execute and expand the item only when conditions are met.

The TreeView component is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or any other JavaScript framework.