The onHover View Modifier In SwiftUI

The onHover View Modifier In SwiftUI
⏱ Reading Time: 3 mins

View modifiers exist in SwiftUI in order to help us change the appearance and behavior of views easily. In the long list of them some work with particular views only and some other are intended to be used with any view. There are also quite common modifiers that we access often, while on the other edge there are less known ones existing for specific purposes.

Such a lesser common modifier is the onHover(_:). Its name suggests its purpose, which is no other than letting us know when a hover event occurs on a view. It’s mostly useful in macOS applications, where the mouse cursor can go over the area occupied by a view.

To get to know this modifier, let’s go through a small sample application.

The demo app

The goal in this post is to build the following macOS application. It displays a few color views, presenting each color name when the mouse is above the matching view.

App sample where four color views are laid out and the name of each color shows up when the mouse hovers over the color view.

We’ll get started with the following custom type that stores a color’s data, as well as a hovered state; an indication whether a hover event has taken place in the respective view (that we’ll define in a while):

In addition, we’ll also implement the following ObservableObject type. It declares and initializes a NamedColors array marked with the @Published keyword so it can be used properly in SwiftUI part. A few sample NamedColor instances are appended to it in the init() method as shown next :

Going to the SwiftUI view part now, we’ll declare the following @StateObject property initializing a Colors instance:

With that in place, time to add the view contents. Using a LazyVGrid and a ForEach container we’ll layout four color views using the items array in Colors type as datasource. We’ll also add the code that displays each color name, but this will be included in a condition; color name will appear if only the mouse cursor is above the respective color view:

The sample app is now ready, but no color names show up when moving the mouse above each color. Time to make that happen and use the onHover(_:) view modifier.

Detecting and reacting to hover events

The view that we want to observe for hover events is the Color view shown first in the ZStack above:

This is exactly where we’ll append the onHover(_:) view modifier like so:

The isAbove parameter in the modifier’s closure (which can be named as you prefer) is a Bool value that becomes true when the mouse is above the view, and it changes to false when it’s not.

There is just one thing to do in the closure’s body, and that is to update the value of the isHovered property of the current color item object according to isAbove value:

When isAbove is true, the isHovered will be true as well, and of course, it will become false when isAbove also becomes false. Changes to the value of the isHovered property of any color item object will cause SwiftUI to re-render its contents, and subsequently to show or hide a name color if necessary.

The above is the last addition in the sample app demonstrated here, so if we run it we’ll get the results shown previously in the beginning:

App sample where four color views are laid out and the name of each color shows up when the mouse hovers over the color view.


Although not so common, the onHover(_:) view modifier in SwiftUI can help react on hover events when needed. As you can see, it’s pretty straightforward to use it and to implement any custom logic in its closure’s body. The small sample app in this post gave you a taste of that modifier, which I hope you found useful and you’re now ready to use in your own projects.

Thanks for reading! 👨‍💻

If you found this post useful then please consider sharing it! Also, subscribe to my newsletter in order to be notified about everything new published here directly in your inbox, and follow me on Twitter, on YouTube, on Medium and other social media.

Stay Up To Date

Subscribe to my newsletter and get notifiied instantly when I post something new on

    We respect your privacy. Unsubscribe at any time.