Fix tooltip's position while scrolling

[edward1127]

Screencast.from.08-30-2023.01.32.11.AM.webm

I'm using Tooltip as a badge with Next 13. Is there a way to fix the tooltip's position while scrolling?

"use client";

import React from "react";
import * as RadixTooltip from "@radix-ui/react-tooltip";
import { cn } from "@/lib/style";

const Tooltip = ({
  classNames = {
    contentContainer: "card card-compact w-96 bg-primary",
    arrowContainer: "fill-primary",
  },
  content,
  contentProps,
  triggerProps,
  providerProps,
  rootProps,
  children,
  showArrow = true,
}: {
  classNames?: {
    root?: string;
    contentContainer?: string;
    triggerContainer?: string;
    arrowContainer?: string;
  };
  children?: React.ReactNode;
  content?: React.ReactNode;
  contentProps?: RadixTooltip.TooltipContentProps &
    React.RefAttributes<HTMLDivElement>;
  triggerProps?: RadixTooltip.TooltipTriggerProps &
    React.RefAttributes<HTMLButtonElement>;
  providerProps?: RadixTooltip.TooltipProviderProps;
  rootProps?: RadixTooltip.TooltipProps;
  showArrow?: boolean;
}) => {
  return (
    <RadixTooltip.Provider delayDuration={0} {...providerProps}>
      <RadixTooltip.Root {...rootProps}>
        <RadixTooltip.Trigger
          className={cn(classNames?.triggerContainer)}
          asChild
          {...triggerProps}
        >
          {children}
        </RadixTooltip.Trigger>
        <RadixTooltip.Portal>
          <RadixTooltip.Content
            className={cn(classNames?.contentContainer)}
            sideOffset={5}
            {...contentProps}
          >
            {content}
            {showArrow && (
              <RadixTooltip.Arrow className={cn(classNames?.arrowContainer)} />
            )}
          </RadixTooltip.Content>
        </RadixTooltip.Portal>
      </RadixTooltip.Root>
    </RadixTooltip.Provider>
  );
};

export default Tooltip;