TipKit: showing a popover tip on a SwiftUI toolbar button

Question

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.

TipKit

2.1k

Posted by

melsam

Reply

Just don't use .automatic.

—
LogicalLight

Add a Comment

Answer 1

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

Posted by

Iomegano

Add a Comment

Answer 2

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

Posted by

melsam

Add a Comment

Answer 3

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

Posted by

joeycarmello

Add a Comment

Answer 4

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

Posted by

Michaf

Same here, it seems like Label doesn't allow a popoverTip from appearing

—
KevinRaney
Works. Thank you!

—
DmitryKanunnikoff
This helped! Thanks! (with a menu in my case)

—
yega

Add a Comment

Answer 5

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

Posted by

alexander216

Add a Comment

TipKit: showing a popover tip on a SwiftUI toolbar button

Replies