Creating Tooltips with the brand new TipKit Framework

It’s all the time necessary to make your app as intuitive as attainable. Nonetheless, for some options, it could be useful to offer additional info to show customers the way to use them successfully. That’s the place TipKit is available in. Launched in iOS 17, TipKit is a framework for displaying suggestions in your app, permitting builders to supply further steering and guaranteeing customers to benefit from your app’s options.

On this tutorial, we are going to discover the TipKit framework and see the way to create suggestions for a demo app utilizing SwiftUI.

Utilizing the TipKit Framework

To make use of the TipKit framework, it’s a must to first import it into your challenge:

import TipKit

Understanding the Tip Protocol

To create a tip utilizing the TipKit framework, it is advisable undertake the Tip protocol to configure the content material of the tip. Ideas include a title and a brief description. Optionally, you’ll be able to embody a picture to affiliate with the tip.

For instance, to setup the “Save as favourite” tip, you’ll be able to create a struct that conforms to the Tip protocol like this:

struct FavoriteTip: Tip {
    var title: Textual content {
        Textual content("Save the picture as favourite")
    }

    var message: Textual content? {
        Textual content("Your favourite images will seem within the favourite folder.")
    }
}

If you wish to add a picture to the tip, you’ll be able to outline the picture property:

struct FavoriteTip: Tip {
    var title: Textual content {
        Textual content("Save the picture as favourite")
    }

    var message: Textual content? {
        Textual content("Your favourite images will seem within the favourite folder.")
    }

        var picture: Picture? {
        Picture(systemName: "coronary heart")
    }
}

Displaying Ideas Utilizing Popover and TipView

The TipKit framework supplies the pliability to show suggestions both as a popover or an inline view. Within the popover view, it seems over your app’s UI, which may very well be a button, a picture, or different UI components. Then again, the inline view behaves like different customary UI components, adjusting its place to suit round different views, guaranteeing that no UI components are blocked.

To indicate the tip as an inline view, you’ll be able to create an occasion of TipView and go it the tip to show. Right here is an instance:

non-public let getStartedTip = GetStartedTip()

var physique: some View {
    .
    .
    .

        TipView(getStartedTip)

    .
    .
    .
}

If you wish to show a tip as a popover view, you’ll be able to connect the modifier popoverTip to the button or different UI components:

non-public let favoriteTip = FavoriteTip()

Picture(systemName: "coronary heart")
    .font(.system(measurement: 50))
    .foregroundStyle(.white)
    .padding()
    .popoverTip(favoriteTip, arrowEdge: .prime)

To allow the looks of suggestions inside your apps, the ultimate step is to configure the Ideas heart. Assuming your Xcode challenge is called TipKitDemo, you’ll be able to swap over to TipKitDemoApp and replace the struct like this:

@major
struct TipKitDemoApp: App {
    var physique: some Scene {
        WindowGroup {
            ContentView()
                .activity {
                    strive? Ideas.configure([
                        .displayFrequency(.immediate),
                        .datastoreLocation(.applicationDefault)
                    ])
                }
        }
    }
}

We are able to customise the show frequency and the information retailer location by using the configure technique of the Ideas heart. Within the code snippet above, the show frequency is ready to quick, which implies the ideas can be proven instantly. If you happen to want the tricks to seem as soon as each 24 hours, you should use the .each day choice. Furthermore, you may have the pliability to customise the show frequency to any desired time interval, as demonstrated within the following instance:

let threeDays: TimeInterval = 3 * 24 * 60 * 60

Ideas.configure([
    .displayFrequency(threeDays),
    .dataStoreLocation(.applicationDefault)
])

With the Ideas heart configured, you need to be capable of see the ideas when operating the app within the simulator.

Previewing the Ideas

If you wish to preview the ideas within the preview canvas, you additionally must arrange the Ideas heart within the #Preview block. Right here is an instance:

#Preview {
    ContentView()
        .activity {
            strive? Ideas.resetDatastore()

            strive? Ideas.configure([
                .displayFrequency(.immediate),
                .datastoreLocation(.applicationDefault)
            ])
        }
}

An necessary level to notice is the inclusion of an additional line of code for resetting the information retailer. As soon as a tip is dismissed, it gained’t be displayed once more within the app. Nonetheless, with regards to previewing the app and guaranteeing that the ideas are persistently proven, it is strongly recommended to reset the information retailer.

Dismissing the Ideas

Customers have the choice to dismiss a tip by tapping the X image. If there’s a must dismiss the tip view programmatically, you’ll be able to make the most of the invalidate technique and supply a selected cause as demonstrated under:

getStartedTip.invalidate(cause: .actionPerformed)

The rationale actionPerformed implies that the consumer carried out the motion that the tip describes.

Specifying Show Guidelines

The Tip protocol has an non-obligatory property so that you can set tup the show guidelines of the tip. It helps two sorts of guidelines: parameter-based and event-based. Parameter-based guidelines are perfect for displaying suggestions primarily based on particular Swift worth sorts. Then again, event-based guidelines allow you to outline actions that must be fulfilled earlier than a consumer turns into eligible to obtain a tip.

As an illustration, the favourite tip ought to solely be displayed after the “Getting Began” tip. We are able to arrange the parameter-based rule like this:

struct FavoriteTip: Tip {

    var title: Textual content {
        Textual content("Save the picture as favourite")
    }

    var message: Textual content? {
        Textual content("Your favourite images will seem within the favourite folder.")
    }

    var guidelines: [Rule] {
        #Rule(Self.$hasViewedGetStartedTip) { $0 == true }
    }

    @Parameter
    static var hasViewedGetStartedTip: Bool = false
}

Within the code above, we introduce a parameter known as hasViewedGetStartedTip utilizing the @Parameter macro, initially set to false. The guidelines property incorporates a rule that validates the worth of the hasViewedGetStartedTip variable, indicating that the tip must be displayed when the worth is true.

When the picture is tapped, the “Getting Began” tip is dismissed. In the identical closure, we will set the worth of hasViewedGetStartedTip to true.

.onTapGesture {
    withAnimation {
        showDetail.toggle()
    }

    getStartedTip.invalidate(cause: .actionPerformed)

    FavoriteTip.hasViewedGetStartedTip = true
}

Upon launching the app, solely the “Getting Began” tip is displayed. Nonetheless, when you faucet the picture to dismiss the tip, the app then presents the “Favourite” tip.

Abstract

On this tutorial, we coated the TipKit framework obtainable on iOS 17. It’s a useful device for showcasing hidden app options and educating customers the way to successfully make the most of them. With TipKit, you’ll be able to effortlessly create and show tricks to improve the consumer expertise. If you happen to discover TipKit helpful, think about integrating it into your subsequent app replace for added advantages.

To be taught extra about different SwiftUI suggestions, you’ll be able to try our Mastering SwiftUI e book.