What's the suggested way to add Tooltips to ToggleGroup items?

[bjoluc]

I tried rendering ToggleGroup.Items as (asChild) Tooltip.Triggers, but both Tooltip.Trigger and ToggleGroup.Item expect to own (data-ownedby) the underlying button element and rely on this in their event handler props (especially for keyboard navigation). For now, I will likely use the Tooltip's context to display tooltips "by hand" in toggle groups, but I'm keen to know if anyone has a more elegant solution that I'm failing to see. Cheers!

[Hwacc]

This is similar to the nested-interactive issue we hit with combined XXTrigger + TooltipTrigger.

Typically, we wrap them with TooltipDynamicTrigger component, which does:

<TooltipTrigger as-child>
  <span> {/* non-tab host for TooltipTrigger */}
    <XXTrigger {...props} />
  </span>
</TooltipTrigger>

Bubbling focusin/focusout and pointer events (pointerover/pointermove, etc.) reach the span, so the tooltip still works while XXTrigger stays the only tab stop.

Hope this helps

[segunadebayo]

You can also check: 7b9da86 and update your version of Ark as well.