React tippy "no overload match this call" next js 13 typescript

Question

I'm using react-tippy for the tooltips, here's the code

'use client';

import clsx from 'clsx';
import * as React from 'react';
import { Tooltip as TippyTooltip, TooltipProps } from 'react-tippy';

import 'react-tippy/dist/tippy.css';

type TooltipTextProps = {
  /** Elements to be shown in the tooltip */
  content?: React.ReactNode;
  /** Tooltip trigger */
  children?: React.ReactNode;
  /** Add underline to children, useful for texts */
  withUnderline?: boolean;
  /** If using underline, you can customize the CSS */
  spanClassName?: string;
} & TooltipProps;

/** Tooltip to show additional content or information */
export default function Tooltip({
  content,
  children,
  spanClassName,
  withUnderline = false,
  ...rest
}: TooltipTextProps) {
  return (
    <TippyTooltip
      trigger='mouseenter'
      interactive
      hideOnClick={false}
      html={<>{content}</>}
      {...rest}
    >
      {withUnderline ? (
        <span className={clsx(spanClassName, 'underline')}>{children}</span>
      ) : (
        <span className={spanClassName}>{children}</span>
      )}
    </TippyTooltip>
  );
}

but I get this error on the tooltip component,

No overload matches this call.
  Overload 1 of 2, '(props: TooltipProps | Readonly<TooltipProps>): Tooltip', gave the following error.
    Type '{ children: Element; title?: string | undefined; disabled?: boolean | undefined; open?: boolean | undefined; useContext?: boolean | undefined; onRequestClose?: (() => void) | undefined; ... 32 more ...; style?: CSSProperties | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
  Overload 2 of 2, '(props: TooltipProps, context: any): Tooltip', gave the following error.
    Type '{ children: Element; title?: string | undefined; disabled?: boolean | undefined; open?: boolean | undefined; useContext?: boolean | undefined; onRequestClose?: (() => void) | undefined; ... 32 more ...; style?: CSSProperties | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.

I have tried to overload the props and I think the children one is the problem but still confuse on how to fix this error. Anyone can help?

Answer 1

It is strange that you have both html prop with content and children inside Tooltip. What should be displayed inside tooltip - content or children? This code works:

 return (
    <TippyTooltip
        trigger='mouseenter'
        interactive
        hideOnClick={false}
        // html={<>{content}</>}
        html={<> {withUnderline ? (
            <span className={clsx(spanClassName, 'underline')}>{children}</span>
        ) : (
            <span className={spanClassName}>{children}</span>
        )}</>}
        {...rest}
    />
);