TipKit: showing a popover tip on a SwiftUI toolbar button

Question

OP

Apple

Created Aug ’23

Replies 9

Boosts 8

Views 4.1k

Participants 12

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.

Boost

Answer 1

Iomegano OP

Sep ’23

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

0

Answer 2

OP

Apple

Sep ’23

@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.

0

Answer 3

LogicalLight OP

Oct ’23

Just don't use .automatic.

0

Answer 4

joeycarmello OP

Oct ’23

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

0

Answer 5

Michaf OP

Oct ’23

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

5

Answer 6

alexander216 OP

Apr ’24

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

0

Answer 7

hallux OP

Jun ’24

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.

0

Answer 8

elierwclik OP

Sep ’24

  Full Work!!!

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

0

Answer 9

RK123 OP

Sep ’24

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

0