Logo for tanaschita.com

How to use TipKit to create tool tips in SwiftUI

Learn how to show feature hints as a popover to the user by using TipKit.

04 Mar 2024 · 5 min read

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.

Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 18
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
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.

TipKit popover example.
Example of a TipKit popover

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()
}
Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 18
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Newsletter

Image of a reading marmot
Subscribe

Like to support my work?

Say hi

Related tags

Articles with related topics

ux

swiftui

swift

xcode

ios

How to support dark mode in SwiftUI programmatically

Learn how to improve type safety when working with semantic colors.

18 Mar 2024 · 4 min read

Latest articles and tips

© 2024 tanaschita.com

Privacy policy

Impressum