Using Tooltip in RAC RadioGroup / Radio

[acr92]

Hello!

We're using react-aria-components, and are pretty happy with everything so far, but we have hit a bit of a challenge with RadioGroup and Tooltip.
We have a use-case for a group of buttons where the buttons act as a radio group, to select between different settings. Usually we would just use the icon variant, and have information about what the option does show as a tooltip:

This is for a web application that'll only be used on desktops, not mobile.

The existing react-aria-components Radio does not support tooltips as the focusableProps are put onto a VisuallyHidden input component:

react-spectrum/packages/react-aria-components/src/RadioGroup.tsx

Lines 227 to 229 in 4baa1b0

	<VisuallyHidden elementType="span">
	<input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
	</VisuallyHidden>

We've managed to hack in support for tooltips doing something like below (not functioning code, if necessary I can create a codesandbox):

interface CustomRadioProps extends AriaRadioProps {
  children: string;
  icon: React.FC<React.SVGProps<SVGSVGElement>>;
}
function CustomRadio(
  props: CustomRadioProps,
  ref: React.ForwardedRef<HTMLLabelElement>,
) {
  const { children, icon: Icon, ...radioProps } = props;
  const innerRef = React.useRef<HTMLDivElement>(null);
  const { focusableProps } = useFocusable({}, innerRef);

  return (
    <div className={radioButton} ref={innerRef} {...focusableProps}>
      <AriaRadio
        className={({ isDisabled }) => button({ isDisabled })}
        ref={ref}
        aria-label={children}
        {...radioProps}
      >
        <Icon className={iconStyle({ size: "s" })} />
      </AriaRadio>
    </div>
  );
}

function Example() {
  return (
    <AriaRadioGroup>
      <TooltipTrigger>
        <AriaTooltip>Hello World</AriaTooltip>
        <CustomRadio icon={Circle} value="a">
          First
        </CustomRadio>
      </TooltipTrigger>
      <TooltipTrigger>
        <AriaTooltip>Hello World</AriaTooltip>
        <CustomRadio icon={Circle} value="b">
          Second
        </CustomRadio>
      </TooltipTrigger>
      <TooltipTrigger>
        <AriaTooltip>Hello World</AriaTooltip>
        <CustomRadio icon={Circle} value="c">
          Third
        </CustomRadio>
      </TooltipTrigger>
    </AriaRadioGroup>
  );
}

The issue with this is that if you click on the button while the tooltip animation is playing then it gets re-positioned to the visually hidden input element, so it looks weird:

If the animation completes (we just use the default animation for RAC tooltips) then everything works fine.

So my question is:

• Is the lack of support for tooltips in RadioGroup / Radio on purpose, or is it just that no one has needed that feature yet?

[rafal-akiro]

I am also interested in resolving this issue. Any updates?

[snowystinger]

This discussion is a duplicate of [RAC] Can't use Tooltip with Switch lets move further comments over there. Thank you!