Radix UI tips

#Engineering
Radix UI is a popular React library to build accessible products. Here is a neat tip I found very useful.

Group tooltips

Use TooltipProvider to group all tooltips together, to get a better transition experience. See my demo (The brand color example isn’t grouped, the background color example is grouped)👇

Code example:

export function BackgroundColor() {
  return (
    <div>
      // ✅ Lift it here
      <TooltipProvider>
        <ul className="flex flex-wrap gap-x-6 gap-y-4">
          {COLORS.map(({ name, className, hex }) => (
            <li key={name}>
              // ❌ Don't use TooltipProvider here
              <Tooltip>
                <TooltipTrigger
                  className={clsx(
                    'h-7 w-7 rounded-sm border',
                    FOCUS_RING_ERROR_SHADOW_XS,
                    className,
                  )}
                  type="button"
                />
                <TooltipContent>
                  <p className="pb-1.5 text-xs font-medium text-gray-500">
                    {name}
                  </p>
                  <p className="text-sm font-semibold text-gray-600">{hex}</p>
                </TooltipContent>
              </Tooltip>
            </li>
          ))}
        </ul>
      </TooltipProvider>
    </div>
  );
}

Thanks to RadixUI’s consistency, this tip can be applied to many other Radix components as well, for example: hover-card.

Radix UI tips

Group tooltips

Create your blogs directly from Apple Notes.

Subscribe to Quotion

More from the site

Apple Notes Updates 2024

How to Share Apple Notes and Collaborate with Others

Use Templates in Apple Notes