How to use TipKit to create tool tips in SwiftUI

At WWDC23, Apple introduced TipKit which allows us to show feature hints to the user with a few lines of code.

Let's directly jump in and see how it works.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

The following image shows an example of a TipKit popover hint that is shown over a toolbar button when the user opens the view for the first time.

The tip shown above can be implemented by following these steps:

1. Defining a tip which conforms to the Tip protocol
2. Initializing and configuring tips on app start
3. Displaying the tip on top of the desired view using popover tips

Let's look at each step in more detail.

1. Defining a tip which conforms to the Tip protocol

The first step is to define our custom tip which conforms to Tip which is a protocol defined by TipKit:

import TipKit

struct EditShoppingListRecipesTip: Tip {
    // 1.
    var title: Text {
        Text(LocalizedStringKey("common.shoppingList.edit.tip.title"))
    }

    var message: Text? {
        Text(LocalizedStringKey("common.shoppingList.edit.tip.message"))
    }

    var image: Image? {
        Image(systemName: "square.and.pencil")
    }

    // 2.
    var options: [Option] {
        [MaxDisplayCount(1), IgnoresDisplayFrequency(true)]
    }
}

1. The Tip protocol provides different properties which we can use to configure the tip's UI components like title, message and image.

2. Additionally, we can specify the options property, for example to configure the maximum number of times a tip displays or to control whether a tip obeys the preconfigured display frequency interval.

Furthermore, we could specify rules for our tip to add even more control when to show it to the user. To learn more about rules, check out this article (coming soon).

2. Initializing and configuring tips on app start

The next step is to initialize tips on app start. All we need to do here is to call Tips.configure() once per app session, for example in the init() method of the app.

struct RecipesApp: App {

    ...

    var body: some Scene {
        WindowGroup {
            AppRootView()
                ...
        }
    }

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

If needed, we could pass in a configuration, for example to set the display frequency:

Tips.configure([.displayFrequency(.daily)])

When set, the system will not show more than one tip per day.

3. Displaying the tip on top of the desired view using popover tips

The last step is to call the tip by using SwiftUI's popoverTip modifier.

private var editingModeTip = EditShoppingListRecipesTip()

var body: some View {
    ...
    Image(systemName: "square.and.pencil")
        .popoverTip(editingModeTip)
}

With that in place, the system will show the tip to the user once the editing button becomes visible.

Instead of a popover, TipKit also provides the possibility to show the tip inside any SwiftUI view by using TipView, for example:

VStack {
    TipView(tip)
    ContentView()
}