Popovers

Experience iOS Popover direction, size, and behavior interactively. Change arrow direction and size to see changes reflected on the iPhone screen instantly.

9:41
●●●● WiFi 🔋
Popovers
Popover Preview
Details
This popover displays additional information about the selected item.
⚠️ HIG Violation: Improper popover usage
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Use popovers for supplementary content
  • Point the arrow at the source element
  • Size appropriately for content
  • Dismiss when tapping outside

✗ Don't Do This

  • Don't use popovers for critical information
  • Don't make popovers too large on iPhone
  • Don't present popovers from popovers
  • Don't use popovers when a sheet is more appropriate

👆 See the bad pattern in the iPhone preview above

Small
Medium
Large
Dismiss on Tap Outside
SwiftUI Code