Function Tooltip

components/tooltip.tsx:142–168

({
  placement = 'top',
  size = 'medium',
  variant = 'primary',
  showArrow = true,
  children,
  className,
  containerClassName,
  value,
  ...rest
}: TooltipProps)

}

export function Tooltip({
  placement = 'top',
  size = 'medium',
  variant = 'primary',
  showArrow = true,
  children,
  className,
  containerClassName,
  value,
  ...rest
}: TooltipProps) {
  const id = useId();

  return (
    <div className={clsxMerge('group relative inline-block whitespace-nowrap', containerClassName)}>
      <div aria-describedby={id}>{children}</div>
      <span
        id={id}
        role='tooltip'
        className={clsxMerge(tooltipVariants({ placement, size, variant, showArrow }), className)}
        {...rest}
      >
        {value}
      </span>
    </div>
  );
}

Tooltip.displayName = 'Tooltip';