How to display text when hovering over an Image

Question

My intent is to display the location of the cursor in Image coordinates when the cursor is over the image. As an initial step I can print the location but I need to display it to the user. I've found some possible solutions but none that do what I need.

The code below works except that I need to display the position. How do I display the position near the cursor?

struct ImageView: View {
var body: some View {
    Image("testImage") // placeholder
        .resizable()
        .frame(width: 640, height: 480)
        .onHover { hover in
            if hover {
                NSCursor.crosshair.push()
            } else {
                NSCursor.pop()
            }
        }
        .onContinuousHover { phase in // (col, row)
             switch phase {
             case .active(let location):
                 print("---> location: \(location)") // WORKS
             case .ended:
                 break
             }
         }
}

}

Answer 1

You can display the location like this:

struct ImageView: View {
    
    @State var location: CGPoint = .zero
    
    var body: some View {
        VStack {
            Text("Current location: \(location.x), \(location.y)")
            
            Image("testImage") // placeholder
                .resizable()
                .frame(width: 640, height: 480)
                .onHover { hover in
                    if hover {
                        NSCursor.crosshair.push()
                    } else {
                        NSCursor.pop()
                    }
                }
                .onContinuousHover { phase in // (col, row)
                    switch phase {
                    case .active(let location):
                        NSCursor.crosshair.push()
                        self.location = location
                    case .ended:
                        break
                    }
                }
        }
    }
}