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.
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)
}
}
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.