In TipKit, how can I have a floating tip pointing at an element in a form?

Question

I'm using TipKit to show tips. I have a form, that has an image in it and I want to show a tip letting the user they should tap on it to change the image.

struct TapToSelectImageTip: Tip {
    var id = UUID()
    
    var title: Text {
        Text("Tap to Select Image")
    }
    var message: Text? {
        Text("This is the background for your setting. Tap to select it from your photo library or other places.")
    }
    var asset: Image? {
        Image(systemName: "photo")
    }
}

struct SettingEditView : View {
    @Binding var editValue: DialogSetting

    var tapToSelectImageTip = TapToSelectImageTip()
    
    var body: some View {
        VStack {
            List {
                Section("Background image") {
                    VStack {
                        ImportedImageView(imageID: $editValue.backgroundImage)
                            .frame(maxWidth: .infinity)
                        TipView(tapToSelectImageTip, arrowEdge: .top)
                    }
                }
            }
        }
    }
}

When the tip isn't showing, the image fills the Form section:

When the tip is showing, it's expanding the container, showing the tip in a white background.

How can I get the tip to float above the container, and leave the container size unaffected by whether or not the tip is showing?

Answer 1

Use .popoverTip:

ImportedImageView(imageID: $editValue.backgroundImage)
  .frame(maxWidth: .infinity)
  .popoverTip(tapToSelectImageTip)