Tooltip overlapped

[b95505017]

The original content was written in VStack.

[bring-shrubbery]

Oops, I'll take a look at this this weekend! @b95505017 Could you provide an example code snippet that results in this behavior? That would help me to debug it a lot, thanks!

[bring-shrubbery]

Hey @b95505017, I didn't have time to fix both issues, but you might want to look at setting the zIndex (link) to try to fix this issue without modifying the source code.

[b95505017]

@bring-shrubbery Yes modify zIndex works! Wondering is it necessary to set it outside from the library?

[bring-shrubbery]

@b95505017 well, since zIndex can be different for each app, pre-setting it in the package could be harmful, although if you can still override it then I guess it could be fine 🤔

For your case, are you setting the zIndex on your components that overlap the tooltip?

[b95505017]

@bring-shrubbery It's just a normal VStack, and I just add tip to one of child item. Like this:

VStask {
    Text("1")
    Text("2")
        .tooltip(.bottom) {
            Text("tip\ntip\ntip")
         }
    Text("3")
}

[bring-shrubbery]

@b95505017 Hmmm, I think it might be sound to add a pre-set zIndex to the tooltip then! I'll try to add it asap this week.

[RobinDaugherty]

There doesn't seem to be a way to set the zIndex of an overlay (and changing the content of the overlay doesn't seem to do the job). But setting zIndex on the item within the stack does seem to do the job:

VStack(spacing: 6) {
    Text("Previous")

    Text("Say...").tooltip(config: config) {
        Text("Something nice!")
    }
    .zIndex(1) // This just needs to be higher than the next view so its tooltip will be on top

    Text("Next")
}

If you're doing this in a ForEach, you need to set a higher zIndex on the element that will have the tooltip:

ForEach(item) { items in
    Text(item.name)
        .tooltip(item.id == "somethingSpecial" && showTooltipOnSomethingSpecial) {
            Text("Tooltip")
        }
        .zIndex(item.id == "somethingSpecial" ? 1 : 0)
}