How to show a popover in SwiftUI

If you are an iOS developer immersed in the Apple ecosystem, you know that the transition from UIKit to SwiftUI has changed the game. The declarative interface allows us to build complex applications with less code, but it also introduces new paradigms for navigation and presentation.

One of the most useful and elegant interface elements is the “Popover.” In modern Swift programming, knowing when and how to use a popover is crucial for delivering a smooth user experience (UX), especially when developing universal applications that must work on iPhone, iPad, macOS, and watchOS.

In this tutorial, we will explore in depth how to show a popover in SwiftUI, breaking down the code, platform differences, and best practices within Xcode.

What is a Popover and When to Use It?

Before opening Xcode, it is vital to understand the concept. A popover is a transient view that appears above other content on the screen. Typically, it includes an “arrow” or anchor pointing to the element that triggered its appearance (like a button).

Unlike a Sheet (modal sheet) that covers a large part of the screen, or an Alert that interrupts the flow, the popover is contextual. It serves to show options, details, or tools specifically related to the element the user just tapped.

The Apple Ecosystem Challenge

For an expert Swift developer, the challenge lies in adaptability:

• iPadOS and macOS: Popovers float and point to the source.
• iOS (iPhone): Traditionally, a popover “adapts” and becomes a modal sheet covering the bottom of the screen due to limited space, unless we force its behavior.
• watchOS: Space is so limited that the visual concept of a popover changes drastically.

Throughout this article, you will learn how to control these behaviors.

Project Setup in Xcode

To follow this tutorial, make sure you have the latest version of Xcode installed.

1. Open Xcode.
2. Create a new project (“Create New Project”).
3. Select “App” under the iOS (or Multiplatform) tab.
4. Ensure the interface is SwiftUI and the language is Swift.

Method 1: Basic Popover (Boolean)

The simplest way to show a popover is by binding its presentation to a boolean state variable (@State).

Step 1: Define the State

In SwiftUI, the UI is a reflection of the state. We need a variable that acts as a light switch: on (show) or off (hide).

import SwiftUI

struct BasicPopoverView: View {
    // State variable to control visibility
    @State private var showPopover: Bool = false

    var body: some View {
        VStack {
            Text("Learn Swift Programming")
                .font(.headline)
                .padding()

            Button("Show Options") {
                // On press, change state to true
                showPopover = true
            }
            .buttonStyle(.borderedProminent)
            // Here is where the magic happens
            .popover(isPresented: $showPopover) {
                // The content of your popover
                VStack {
                    Text("Hello, iOS Developer!")
                        .font(.title2)
                        .padding()
                    Text("This is a standard popover.")
                }
                .padding()
                // Size suggestion (optional but recommended)
                .presentationCompactAdaptation(.popover) 
            }
        }
    }
}

Breaking Down the .popover Modifier

The .popover(isPresented:attachmentAnchor:arrowEdge:content:) modifier is the main tool.

• isPresented: Requires a Binding<Bool>. That is why we use the dollar sign $showPopover. When the user closes the popover (by tapping outside it), SwiftUI automatically changes this variable to false.
• content: This is a ViewBuilder where you define what will be shown inside the floating bubble.

The iPhone “Problem”: presentationCompactAdaptation

If you run the code above on an iPad simulator, you will see a perfect floating bubble. However, if you run it on an iPhone, you will see it appears as a sheet sliding up from the bottom.

Why? Apple, in its Human Interface Guidelines (HIG), determines that on narrow screens (Compact Width), popovers must adapt to improve usability.

However, as an iOS Developer, sometimes you need it to be a real popover (for example, in a quick settings menu). Since iOS 16.4 and Xcode 14+, we have an elegant solution:

.popover(isPresented: $showPopover) {
    MyContentView()
        // This line forces popover behavior even on iPhone
        .presentationCompactAdaptation(.popover)
}

By using .presentationCompactAdaptation(.popover), we tell SwiftUI that we don’t want it to transform into a modal sheet, but rather attempt to keep its floating form.

Note: Use this with caution on iPhone. If the content is very large, a floating popover on a small screen might cut off the content.

Method 2: Showing Popover with Dynamic Data (Item)

In professional Swift programming, we rarely show static content. Generally, we want to show details of a specific object selected by the user. For this, we use the .popover(item:) variant.

Step 1: Data Model

We need an object that conforms to the Identifiable protocol.

struct UserProfile: Identifiable {
    let id = UUID()
    let name: String
    let bio: String
}

Step 2: Implementation in the View

Instead of a Bool, we use an optional state variable that holds the selected item.

struct DynamicPopoverView: View {
    // State is an optional of the data type
    @State private var selectedUser: UserProfile?

    var body: some View {
        VStack {
            Button("View Ana's Profile") {
                // Assigning a value triggers the popover
                selectedUser = UserProfile(name: "Ana", bio: "Senior iOS Developer")
            }
        }
        .popover(item: $selectedUser) { user in
            // SwiftUI gives us the 'user' object safely unwrapped
            VStack(alignment: .leading) {
                Text(user.name)
                    .font(.largeTitle)
                    .bold()
                Text(user.bio)
                    .foregroundColor(.gray)
            }
            .padding()
            .frame(width: 300, height: 200)
        }
    }
}

When selectedUser receives a value, the popover appears. When the user closes it, SwiftUI automatically sets selectedUser to nil. This is the beauty of SwiftUI: memory and state management is incredibly clean.

Advanced Customization: Arrows and Anchors

Sometimes, design requires the popover to emerge from a specific direction. By default, iOS decides the best location, but we can influence it.

arrowEdge

This parameter indicates which edge we prefer the arrow to appear from.

.popover(isPresented: $show, arrowEdge: .top) { ... }

This suggests the arrow should point up (the popover will appear below the button). Keep in mind the system may ignore this if there isn’t enough screen space.

attachmentAnchor

This is for pixel-perfect control. It defines exactly where the popover “connects” to the source view.

.popover(isPresented: $show, 
         attachmentAnchor: .point(.center), 
         arrowEdge: .bottom) { ... }

You can use .rect(...) to anchor it to a specific area of the button or .point(...) for a specific point relative to the view’s coordinate system.

Cross-Platform Development: macOS and watchOS

As promised, a good Swift article must cover the entire ecosystem.

macOS (AppKit via SwiftUI)

On macOS, popovers are first-class citizens. They do not turn into sheets. When developing for Mac with SwiftUI:

1. Popovers close automatically when clicking outside them (transient behavior).
2. You can make the popover “detachable” if you use native AppKit, but in pure SwiftUI, this is still limited.
3. Xcode Tip: Ensure you give an explicit size to the popover content on macOS using .frame(minWidth: 200, minHeight: 100), otherwise, it might render too small.

// Specific example for macOS
Button("Info") { showInfo = true }
    .popover(isPresented: $showInfo) {
        Text("Mac Content")
            .padding()
            .frame(width: 250, height: 150) // Crucial on macOS
    }

watchOS (Apple Watch)

Here we enter delicate territory. Does a popover exist on a 40mm watch? Technically, the SwiftUI API compiles, but the visual behavior is not a “floating bubble with an arrow.”

On watchOS:

• The .popover behaves almost identically to a .sheet.
• It slides a new view over the current one.
• The user must explicitly close it or swipe down (if possible).

Recommendation for watchOS: If you are designing for the watch, don’t think of visual “popovers.” Think of “modal flows.” Use the same code, but design the internal content (content) knowing it will occupy the full watch screen. Use large text and clear buttons.

Best Practices and Common Mistakes

To stand out as a senior iOS Developer, you must avoid these common mistakes when trying to show a popover:

1. The “Is Presented” Cycle

Never try to change the isPresented variable to false from inside the popover view’s init. This causes rendering conflicts in SwiftUI. Use the environment @Environment(\.dismiss) to close the popover programmatically from within.

struct PopoverContent: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        Button("Close") {
            dismiss() // Correct way to close
        }
    }
}

2. Overuse on iPhone

Although we learned to force the popover on iPhone with presentationCompactAdaptation, do not abuse it. Apple’s guidelines suggest sheets for the iPhone because they are easier to interact with using one hand (the thumb reaches the bottom, but not the top-center where a popover might float).

3. Accessibility (VoiceOver)

Popovers are accessible by default, but ensure the reading order is logical. When the popover appears, VoiceOver focus should move immediately to the popover content. SwiftUI handles this well, but always test on your real device.

Optimization and Performance in SwiftUI

When using Xcode, you will notice that popovers are lightweight. However, if your popover content is very complex (e.g., makes network calls or loads heavy images), consider the following:

• Lazy Loading: The popover content is initialized immediately when the parent view is created, even if it is not shown, unless you use internal conditional logic.
• View Separation: Do not write all the popover code inside the .popover { ... } closure. Create a separate struct for the content view. This helps the Swift compiler and keeps your code clean.

Bad:

.popover(isPresented: $show) {
    // 50 lines of code here...
}

Good:

.popover(isPresented: $show) {
    UserProfileDetailView(user: user)
}

Conclusion

Mastering the ability to show a popover in SwiftUI is an essential skill for any iOS Developer. We have covered everything from basic implementation to cross-platform adaptation on macOS and watchOS.

Modern Swift programming is about understanding the user’s “intent” and using the right interface tool. The popover is the perfect tool for quick contextual actions that do not require the user to lose sight of their main task.

Summary of Key Steps:

1. Use .popover(isPresented:) for simple control.
2. Use .popover(item:) to inject dynamic data.
3. Use .presentationCompactAdaptation(.popover) if you need to force the floating style on iPhone.
4. Separate content into subviews to keep your code clean and reusable.

Now it’s your turn. Open Xcode, experiment with anchors, and create interfaces that delight your users.

If you have any questions about this article, please contact me and I will be happy to help you 🙂. You can contact me on my X profile or on my Instagram profile.