CODEWITHSUNDEEP
swiftswiftuiswiftui-tabviewtipkit
Markus
Markus

Reputation: 3375

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.

Upvotes: -1

Views: 82

Answers (1)

Benzy Neez
Benzy Neez

Reputation: 21720

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.

Upvotes: 1

Related Questions