Introduction to TipKit in SwiftUI

3 min readApr 15, 2024

In this post, I want to talk about TipKit in SwiftUI.
Ever felt like your app’s hidden gems are going unnoticed? Or maybe you’ve introduced a fantastic new feature in an update, but users aren’t quite sure how to find it. Well, fret no more! SwiftUI’s got your back with the introduction of TipKit in iOS 17.

What is TipKit?

TipKit is a new framework introduced in iOS 17 that allows developers to present tips and instructions to users within their apps. It’s designed to improve discoverability, guide users effectively, and enhance the overall user experience. These tips can be used to:

Highlight underutilized features: Subtly nudge users towards functionalities they might not be aware of, enriching their app experience.
Showcase new features: Onboard users to fresh additions in your latest update, ensuring they don’t miss out on the exciting innovations.
Provide in-app guidance: Offer quick explanations or tutorials directly within the app, eliminating the need for users to search for help elsewhere.

How to create a Tip?

To create a tip using TipKit, you’ll work with the Tip struct. Let’s start with a simple example:

struct SimpleTip: Tip {
    var title: Text {
        Text("Did you know you can tap on me?")
    }

    var message: Text? {
        Text("Press me to trigger an action")
    }

    var image: Image? {
        Image(systemName: "info.bubble")
    }
}

This simple tip displays a message informing users about the tap functionality. As you can see, TipKit offers more than just text! You can incorporate images, links, and even custom views for a richer experience.

Presenting the Tip

Before displaying any tips, you must load them into your app during startup:

init() {
    try? Tips.configure()
}

var body: some Scene {
    WindowGroup {
        ContentView()
    }
}

For displaying Tips, There are two presentation styles to choose from:

Inline: An inline component that you can place anywhere in your UI. Use TipView and specify the arrow direction:

Text(message)
Button("Simple button") {
    message = "Huurrraaay!"
}
TipView(SimpleTip(),arrowEdge: .top)

Popover: A view modifier that presents the tip above all screen elements:

Text(message)
Button("Simple button") {
    message = "Huurrraaay!"
}
.popoverTip(SimpleTip())

Customizing the Tip Experience

TipKit offers various options to customize how your tip is presented. You can control:

Display frequency: Limit the number of times a tip appears to avoid overwhelming users.
Visibility conditions: Set conditions for when the tip should be shown, based on user interactions or app state.
Preferred placement: Specify preferred locations for the tip to appear relative to the target view.

By leveraging these customization options, you can create a user-friendly and informative tip experience.

Conclusion

I tried to introduce TipKit, certainly, I didn’t cover all features and this is just the tip of the iceberg. TipKit opens up a world of possibilities for improving user onboarding and discoverability within your SwiftUI app. To delve deeper, explore the official Apple documentation for TipKit https://developer.apple.com/documentation/tipkit/ and discover how to leverage its full potential.