TipKit: showing a popover tip on a SwiftUI toolbar button

Hi folks, there's currently a known issue in TipKit due to which it won't show popover tips on buttons that are inside a SwiftUI ToolbarItem. For example, if you try this code, the popover tip will not appear:

ToolbarItem {
  Button(action: {...}) {
     Label("Tap here", systemImage: "gear")
  }           
  .popoverTip(sampleTip)
}

There's an easy workaround for this issue. Just apply a style to the button. It can be any style. Some examples are bordered, borderless, plain and borderedProminent. Here's a fixed version of the above code:

ToolbarItem {
  Button(action: {...}) {
     Label("Tap here", systemImage: "gear")
  }  
  .buttonStyle(.plain) // Adding this line fixes the issue.
  .popoverTip(sampleTip)
}

Hope this helps anyone running into this issue.

Thanks, but it doesn't seem to be a workaround anymore. :(

import TipKit

struct ContentView: View {
    struct ExampleTip: Tip {
        var title: Text {
            Text("title")
        }

        var message: Text? {
            Text("message")
        }
    }

    var body: some View {
        Text("Hello world")
//            .popoverTip(NewSnippetTip()) //This works
            .toolbar(content: {
                ToolbarItemGroup(placement: ToolbarItemPlacement.bottomBar) {
                    Button(action: {}) {
                        Label("New Snippet", systemImage: "doc.badge.plus")
                    }
                    .buttonStyle(.plain) // WORKAROUND: Adding this line does NOT fix the issue.
                    .popoverTip(ExampleTip())
                }
            })
    }
}

@Iomegano I see the problem. Removing the placement: ToolbarItemPlacement.bottomBar makes it work, but specifying that bottom bar placement prevents the tip from appearing. This may be related to the same underlying issue I mentioned in my original message. We will investigate this issue. Thank you for reporting it.

Just don't use .automatic.

Specifying an arrow direction on my bottomBar toolbar button makes the tooltip show up for me. .popoverTip(tip, arrowEdge: .bottom)

Replacing Label("New", systemImage: "plus.circle.fill") with Image(systemName: "plus.circle.fill") fixed it for me.

For people also struggling with a button styled Toggle(), Apple recommended in a Feedback to also place the .buttonStyle(.borderless) before the .toggleStyle(.button).

Unfortunately that doesn’t work on macOS for me. Neither of the other tricks helped either … but at least for iOS and visionOS it seems to work for me (running iOS 17.4).

Alternatively, I found a workaround of applying the .popoverTip modifier to the Button / NavigationLink label itself located inside the label closure of the button / link.

  Full Work!!!

      ToolbarItem(placement: .topBarTrailing) {
                Button {
                    // call function 
                } label: {
                    Label("New", systemImage: "gear")
                    .popoverTip(tip, arrowEdge: .top)
                }
                .buttonStyle(.plain)
            }

I have tried different permutation of the suggestions here, but for me neither Button nor Toggle display tooltips on visionOS 2 beta. .help also does not work, unfortunately.

Did anyone got them to work on that platform in a toolbar (mine is attached to a Volume)?

RealityView {
  ...
}
.toolbar {
            ToolbarItemGroup {
              ...
            }
}
TipKit: showing a popover tip on a SwiftUI toolbar button
 
 
Q