SwiftUI ToolTip View component alignment issues

If the tooltip is applied as an overlay to a view that is smaller than the width of the screen, it will need to break out of the overlay frame. You were doing this by setting a fixed width computed from UIScreen.main.bounds.width.

UIScreen.main is deprecated and doesn't work with iPad split screen. So it would be better to measure the screen width using an outer GeometryReader and then pass this width to the modifier. Then:

• In order to be able to move the tooltip to the middle of the screen, the offset of the target view needs to be known. This offset can be measured using an .onGeometryChange modifier and passed to the ViewModifier too.

• The arrow needs to respect the position of the target view. So it works well to use the arrow as the base of the tooltip, then show the message part as an overlay to the arrow.

Here is the updated example to show it working:

struct TestView: View {
    var body: some View {
        GeometryReader { proxy in
            let screenWidth = proxy.size.width
            HStack {
                Rectangle()
                    .frame(width: 100, height: 50)
                    .foregroundStyle(.green)
                    .tooltip(screenWidth: screenWidth)

                Rectangle()
                    .frame(width: 100, height: 50)
                    .foregroundStyle(.blue)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

extension View {
    func tooltip(screenWidth: CGFloat) -> some View {
        modifier(TooltipModifier(screenWidth: screenWidth))
    }
}

struct TooltipModifier: ViewModifier {
    let screenWidth: CGFloat
    @State private var originX = CGFloat.zero

    func body(content: Content) -> some View {
        content
            .onGeometryChange(for: CGFloat.self) { proxy in
                proxy.frame(in: .global).minX
            } action: { minX in
                originX = minX
            }
            .overlay(alignment: .bottom) {
                Tooltip(screenWidth: screenWidth, originX: originX)
                    .alignmentGuide(.bottom) { dimension in
                        dimension[.top]
                    }
            }
    }
}

struct Tooltip: View {
    let screenWidth: CGFloat
    let originX: CGFloat

    var body: some View {
        Triangle()
            .fill(Color.red.opacity(0.5))
            .frame(width: 20, height: 10)
            .frame(maxWidth: .infinity)
            .overlay(alignment: .topLeading) {
                HStack {
                    Text("This is some text that guides the user")
                    Spacer()
                    Image(systemName: "xmark.circle.fill")
                        .resizable()
                        .frame(width: 16, height: 16)
                }
                .fixedSize(horizontal: false, vertical: true)
                .padding(8)
                .background(.red.opacity(0.5), in: .rect(cornerRadius: 8))
                .padding(.horizontal, 20)
                .frame(width: screenWidth, alignment: .leading)
                .offset(x: -originX)
                .padding(.top, 10)
            }
            .padding(.top, 10)
    }
}

You may discover that the tooltip will be covered by any content that follows the target view in the layout. For example, if the HStack in the example is inside a VStack and followed by some Text, the text will cover the tooltip:

GeometryReader { proxy in
    let screenWidth = proxy.size.width
    VStack {
        HStack {
            // ... as above
        }
        Text(loremIpsum) // covers the tooltip 🙁
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

Ways to solve:

• Add padding below the target view, so that the tooltip is shown in this space.

• Show the tooltip above the target view (with arrow pointing down), instead of below it.

• Isolate the target view as the top view in a ZStack.

• Show the tooltip as a layer in a ZStack and position it using .matchedGeometryEffect, instead of showing it as an overlay. This is the technique being used in the answer to iOS SwiftUI Need to Display Popover Without "Arrow" (it was my answer).

EDIT Regarding your follow-up questions:

1. Im trying to make this as reusable and generic as possible so others can use it on their own views as well, my first question is why should the caller provide the screen width to the component? Wouldnt it be better for the component itself to grab the screen width? But then again, GeometryReader wouldnt work as that would grab the width of the immediate parent of the view the modifier is being applied to and not the actual screen width, right (in this simple example the parent of the rectangle is indeed the entire screen but that may not always be the case)? I guess UIScreen would work but as you well said its deprecated and a bad practice afaik.

Correct. The size needs to be passed in from a view that occupies the full screen width (or at least, the full width to be used). A child view can not just read this from somewhere, since UIScreen.main should be avoided.

2. How would you manage dismissing the tooltip once the X is tapped? Would a boolean Binding within TooltipModifier be enough or is there some other fancier way to handle this type of state nowadays?

A boolean flag would work fine. Or you could pass in a function to call (like a custom dismiss function).