Contents

TipView

A user interface element that represents an inline tip.

Declaration

@MainActor @preconcurrency struct TipView<Content> where Content : Tip

Overview

You create a tip view by providing a tip along with an optional arrow edge and action handler. The tip is a type that conforms to the Tip protocol. The arrow edge is a directional arrow pointing away from the tip. The action is a closure that executes when the user triggers a tip’s button.

For example, display a tip view, above an image, with an arrow edge along the bottom:

  1. Define your tip’s content as a structure conforming to the Tip protocol.

  2. Create an instance your tip as a variable in the view containing the feature you want to highlight.

  3. Create an instance of a TipView, near the feature you want to highlight, passing in the instance your tip’s content, along with an optional arrow edge.

  4. Then configure and load the tips for your app by calling configure(_:).

import SwiftUI
import TipKit

// Define your tip's content.
struct SampleTip: Tip {
    var title: Text {
        Text("Save as a Favorite")
    }

    var message: Text? {
        Text("Your favorite backyards always appear at the top of the list.")
    }

    var image: Image? {
        Image(systemName: "star")
    }
}

struct SampleView: View {
    // Create an instance of your tip.
    var tip = SampleTip()

    var body: some View {
        VStack {
            // Place the tip view near the feature you want to highlight.
            // Tips.configure(options:) must be called before your tip will be eligible for display.
            TipView(tip, arrowEdge: .bottom)
        }
    }
}

Topics

Creating a tip view

See Also

Views