swiftswiftuiswiftui-tabviewtipkit

TipKit with TabView


In my SwiftUI app for iOS, I have a TabView with two tabs.

Now I want to add a ToolTip to the second tabItem label. I am trying to use the TipKit framework, but I just don't see the tip.

Here is an example of the code, and running this won't show me any tooltip.

struct TestTip: Tip {
    var title: Text = .init("OH YES!")
}

struct MainTabView: View {
    var testTip = TestTip()
    @State private var mainTabSelection = 0

    init() {
        do {
            try Tips.configure()
        } catch {
            print("Error configuring tips: \(error.localizedDescription)")
        }
    }

    var body: some View {
        TabView(selection: $mainTabSelection) {
            Foo()
                .tabItem {
                    Label("foo", systemImage: "house")
                }
                .tag(0)
            Bar()
                .tabItem {
                    Label("bar", systemImage: "star")
                        .popoverTip(testTip)
                }
                .tag(1)
        }
        .tint(.blue)
    }
}

GPT has suggested that I should place the tip inside the Bar instead, but that doesn't really work since I want to connect the tip to the tabItem label.


Solution

  • It doesn't seem to be possible to attach a tip to a tabItem of a native TabView.

    A workaround is to show a hidden placeholder in the background of the TabView and attach the tip to this instead:

    var body: some View {
        TabView(selection: $mainTabSelection) {
            Foo()
                .tabItem {
                    Label("foo", systemImage: "house")
                }
                .tag(0)
            Bar()
                .tabItem {
                    Label("bar", systemImage: "star")
                }
                .tag(1)
        }
        .tint(.blue)
        .background(alignment: .bottomTrailing) {
            HStack(spacing: 0) {
                Color.clear
                Color.clear
                    .popoverTip(testTip)
            }
            .frame(height: 50)
        }
    }
    

    Screenshot


    Alternatively, you could use a custom tab bar. This should make it possible to attach the tip to the label of the tab item. See this answer for an example implementation of a custom tab bar.