How to Show a Popover on iPhone in SwiftUI

In the fascinating and ever-changing world of app development for the Apple ecosystem, Swift programming has marked a turning point. As an iOS Developer, you constantly face the challenge of creating user interfaces that are not only aesthetically pleasing but also intuitive and functional. One of the most useful UI tools, yet sometimes misunderstood on smaller screens, is the “popover”.

For a long time, popovers were first-class citizens on the iPad and macOS, but on the iPhone, they automatically transformed into full-screen modals or “sheets”. However, with recent updates to SwiftUI, Apple has given developers full control. In this extensive tutorial, we will explore in depth how to show a popover on an iPhone with SwiftUI, unraveling the secrets of Swift, making the most of Xcode, and ensuring your code is scalable across iOS, macOS, and watchOS.

1. Understanding Popovers in the Apple Ecosystem

Before writing code, it is essential to understand what a popover is and its semantic purpose in an application. A popover is a transient view that floats above the main content, usually pointing with an arrow to the user interface element that triggered it.

The historical dilemma of the iPhone

Traditionally in UIKit, and in the early versions of SwiftUI, if an iOS Developer tried to present a popover on an iPhone (a compact size class environment), the operating system automatically adapted it and displayed it as a “Sheet” that slid up from the bottom of the screen. This made sense from a usability standpoint on small screens, but sometimes the design strictly required a small floating bubble to show a quick action or a brief tooltip.

Today, thanks to the evolution of Swift programming and SwiftUI, we can force this native behavior without resorting to complex hacks or third-party libraries in Xcode.

2. The Basics: Presenting a Standard Popover

In SwiftUI, presenting a popover is just as declarative and simple as presenting any other modal view. We use the .popover(isPresented:attachmentAnchor:arrowEdge:content:) modifier.

Here is a basic example of how this modifier is structured in Swift:

import SwiftUI

struct BasicPopoverView: View {
    @State private var showPopover = false

    var body: some View {
        VStack {
            Button("Show Information") {
                showPopover = true
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            // Modifier for the popover
            .popover(isPresented: $showPopover, arrowEdge: .top) {
                Text("Hello! I am a popover in SwiftUI.")
                    .padding()
                    .frame(width: 200, height: 100)
            }
        }
    }
}

What happens if you run this in Xcode?

If you compile and run this code on an iPad simulator or on macOS, you will see a beautiful floating bubble with an arrow pointing to the button. However, if you run it on an iPhone, you will see the view emerge from the bottom as a Sheet. This is where we need to apply modern SwiftUI magic.

3. The Secret Revealed: How to show a popover on an iPhone with SwiftUI

To achieve the main goal of this tutorial, we need to tell the system not to adapt the popover for a compact environment. Starting with iOS 16.4, Apple introduced a modifier that does exactly this: .presentationCompactAdaptation.

This modifier allows the iOS Developer to specify how a presentation should behave in compact size classes (like the iPhone in portrait orientation).

Implementing Compact Adaptation

Let’s see how to transform the previous code so that the popover maintains its original shape on the iPhone:

import SwiftUI

struct IPhonePopoverView: View {
    @State private var showPopover = false

    var body: some View {
        VStack {
            Button(action: {
                showPopover.toggle()
            }) {
                Image(systemName: "info.circle.fill")
                    .font(.largeTitle)
                    .foregroundColor(.blue)
            }
            .popover(isPresented: $showPopover, arrowEdge: .top) {
                VStack(spacing: 10) {
                    Text("User Details")
                        .font(.headline)
                    Text("Here you can show quick settings or contextual info without leaving the main screen.")
                        .font(.subheadline)
                        .multilineTextAlignment(.center)
                }
                .padding()
                // The key to making it work on iPhone:
                .presentationCompactAdaptation(.popover)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(UIColor.systemGroupedBackground))
    }
}

Analyzing the Swift code

1. .popover(...): Initiates the transient modal presentation.
2. arrowEdge: .top: Suggests to the SwiftUI rendering engine that the popover arrow should point upwards, meaning the popover will appear below the button.
3. .presentationCompactAdaptation(.popover): This is the crown jewel. It tells iOS that, even if we are on an iPhone, it must force the popover-style visual rendering instead of converting it into a Sheet.

With just one extra line of code, you have solved the mystery of how to show a popover on an iPhone with SwiftUI.

4. Customizing the Popover for a Pro-Level UX

Knowing how to show it is only the first step for an iOS Developer. The next is to ensure that it looks and feels like an integral part of your application.

Changing the background color (iOS 16.4+)

Often, the default background might not match your brand’s color palette. We can use the .presentationBackground modifier introduced in recent versions of SwiftUI.

import SwiftUI

struct CustomPopoverView: View {
    @State private var showOptions = false

    var body: some View {
        Button("Advanced Options") {
            showOptions = true
        }
        .buttonStyle(.borderedProminent)
        .popover(isPresented: $showOptions) {
            VStack {
                Button("Edit") { /* Edit action */ }
                Divider()
                Button("Delete", role: .destructive) { /* Delete action */ }
            }
            .padding()
            .presentationCompactAdaptation(.popover)
            // Customizing the popover background
            .presentationBackground(Material.ultraThin) 
        }
    }
}

Using Material.ultraThin provides a beautiful frosted glass effect that adapts to light and dark mode automatically, an excellent practice in Swift programming.

5. Data Handling: .popover(item:)

Just like alerts and sheets, popovers have a variant that accepts an optional item (Binding<Item?>) that conforms to the Identifiable protocol. This is the most recommended and safest way in the SwiftUI architecture to display popovers based on dynamic data.

Practical Example with Data

Suppose we are developing an app to manage notifications and we want to show a popover with the details of a specific notification when the user taps an icon.

import SwiftUI

// 1. We define our data model
struct NotificationItem: Identifiable {
    let id = UUID()
    let title: String
    let message: String
}

struct NotificationListView: View {
    // 2. State to store the selected item
    @State private var selectedNotification: NotificationItem?

    // Mock data
    let notifications = [
        NotificationItem(title: "Update", message: "Xcode 15 is now available."),
        NotificationItem(title: "Meeting", message: "Team call at 10 AM.")
    ]

    var body: some View {
        List(notifications) { notification in
            HStack {
                Text(notification.title)
                Spacer()
                Button {
                    // 3. Assign the value to the state
                    selectedNotification = notification
                } label: {
                    Image(systemName: "ellipsis.circle")
                }
            }
        }
        // 4. Show the popover reacting to the data
        .popover(item: $selectedNotification) { selection in
            VStack(alignment: .leading, spacing: 12) {
                Text(selection.title).font(.headline)
                Text(selection.message).font(.body)
            }
            .padding()
            .frame(width: 250)
            .presentationCompactAdaptation(.popover)
        }
    }
}

This approach ensures that your Swift code is crash-resistant and that the popover is only shown when there is real data to display, avoiding crashes due to null optionals.

6. Multi-platform Scalability: iOS, macOS, and watchOS

As an iOS Developer, your work is rarely limited to a single screen. Apple’s ecosystem encourages us to build universal apps using Xcode. How does our popover code behave on other devices?

On macOS

On macOS, popovers are one of the most common views (think menu bar items or utility windows). The exact same code we just wrote using .popover will work natively and flawlessly on macOS. The .presentationCompactAdaptation(.popover) modifier will simply be ignored by macOS, as this operating system always has a “regular size class” environment.

On iPadOS

Just like on the Mac, the iPad will automatically render the popover as a floating box pointing to the origin. The compact adaptation modifier will only kick in if the user uses “Split View” and your app is squished down to the width of an iPhone. In that case, it will retain the popover design, which is great for maintaining a consistent experience.

On watchOS

The Apple Watch is a special case. In watchOS, due to extreme screen size limitations, the concept of a “floating popover” simply does not exist. If you use .popover on watchOS, SwiftUI will translate it into full-screen navigation or ignore certain styling attributes. For watchOS, it is a good Swift programming practice to use platform-exclusive transient views or redesign the experience using standard .sheet or hierarchical navigation.

7. Best Practices for the iOS Developer

When applying what you have learned about how to show a popover on an iPhone with SwiftUI, it is crucial to follow certain design principles:

1. Keep content brief: A popover on an iPhone should be small and transient. If you need to show a long form, extensive lists, or complex settings, a .sheet (modal sheet) or full navigation (NavigationLink) is still the correct choice.
2. Accessibility (A11y): Ensure that the buttons inside the popover have the proper accessibility labels and that the text supports Dynamic Type. SwiftUI handles much of this, but always test it using VoiceOver in Xcode.
3. Avoid nesting popovers: Presenting a popover from another popover is a recipe for disaster in terms of usability and can cause unexpected behaviors in the SwiftUI rendering engine.
4. Beware of the keyboard: If your popover contains a TextField, make sure that when the keyboard deploys on the iPhone, it doesn’t cover the popover. Consider using the .ignoresSafeArea(.keyboard) modifier with caution, or better yet, redesign to use a Sheet if heavy text input is required on the iPhone.

8. What if I need to support versions prior to iOS 16.4?

This is a very common scenario for the iOS Developer in the real world. If your app in Xcode has a deployment target of iOS 15 or iOS 16.0, the .presentationCompactAdaptation modifier will not be available.

In that case, achieving a true popover on iPhone requires bridging SwiftUI with UIKit using UIViewControllerRepresentable and adjusting the UIPopoverPresentationController delegate. Although this falls outside the declarative scope of this tutorial, it’s important to know that Swift programming allows you to create a bridge between both worlds if strictly necessary due to business requirements. However, whenever possible, encourage the adoption of the latest versions to take advantage of the cleanliness of modern native code.

Conclusion

Apple’s development ecosystem evolves by leaps and bounds. Mastering how to show a popover on an iPhone with SwiftUI is an excellent example of how Apple listens to the community.