Linear-style tooltip UX with Radix UI Primitives

Tooltip.tsx

import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import * as React from 'react';
import { twMerge } from 'tailwind-merge';

/**
 * With this component, if the user moves the cursor between tooltip group, the
 * delay is set to 0, this makes the next tooltip appear immediately.
 */
export const TooltipGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentPropsWithoutRef<'div'>
>(({ className, onMouseEnter, onMouseLeave, ...rest }, ref) => {
  const [showInstant, setShowInstant] = React.useState(false);
  const delay = showInstant ? 0 : 700;

  return (
    <TooltipGroupContext.Provider value={{ delay }}>
      <div
        ref={ref}
        onMouseEnter={(e) => {
          setShowInstant(true);
          onMouseEnter?.(e);
        }}
        onMouseLeave={(e) => {
          setShowInstant(false);
          onMouseLeave?.(e);
        }}
        className={twMerge('h-fit', className)}
        {...rest}
      />
    </TooltipGroupContext.Provider>
  );
});
TooltipGroup.displayName = 'TooltipGroup';

const TooltipGroupContext = React.createContext<{ delay: number } | null>(null);

export function TooltipProvider({
  delayDuration,
  ...rest
}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) {
  const { delay } = React.useContext(TooltipGroupContext) ?? {};

  return (
    <TooltipPrimitive.Provider
      delayDuration={delayDuration ?? delay}
      {...rest}
    />
  );
};