react/types 18 and children

[matthopson]

I noticed some unexpected errors (Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>) with the component after upgrading from react/types 17 to 18 and came across this.

https://github.com/facebook/react/issues/24304

I'm in the middle of updating a bunch of dependencies so I'm a little fatigued and may be mis-reading this and it not be applicable, so feel free to close if not.

Thank you!

[olegtaranenko]

Hi Matt, I'm pretty interested in fixing this issue, as far as it is a show stopper for my migrating to the React 18. Let me know if you maybe need motivation from my side :) personally, I'm not too sophisticated in typescript, not sure I can really help you.

[AbnerLandim]

For those facing this issue with Typescript after React 18, here's a temporary workaround.

Just create a component that clones the Tooltip from react-tippy using React.cloneElement and inject an object containing a children prop along with the regular props. See the example below:

import React from "react"
import { Tooltip } from "react-tippy"

// Here we create an object for our Tooltip props, with a prop called children with our actual children elements.
const customTooltipProps = {
  position: "top",
  trigger: "click",
  title: "I am a tooltip",
  children: (<span>I am clickable</span>)
}

// Now we inject all props from above in the clone.
const CustomTooltip = React.cloneElement(<Tooltip />, { ...customTooltipProps })

...

// In the end of our file we return the custom cloned component.
return CustomTooltip

I think you can use the third argument from cloneElement instead, which is the children arg, but I haven't tested that yet.

[ndom91]

Running into this issue as well. Any progress? Cloning each tooltip invocation across our app isn't feasible unfortuantely :/

[marwen-cherif]

I've adapted @AbnerLandim temporary workaround, wich is a good compromise for now,

import { Tooltip, TooltipProps } from 'react-tippy';

interface CustomTooltipProps extends TooltipProps {
  children: ReactNode;
}

const CustomTooltip: FunctionComponent<CustomTooltipProps> = (props) =>
  React.cloneElement(<Tooltip />, { ...props });

export default CustomTooltip;

[olegtaranenko]

@marwen-cherif great catch! one minor improvement... I've added question mark '?' to children, as far as it is possible to set Tooltip body via html prop

import { cloneElement, FunctionComponent, PropsWithChildren, ReactNode } from 'react'

import { Tooltip, TooltipProps } from 'react-tippy'

interface TooltipWrappedProps extends PropsWithChildren<TooltipProps> {
  children?: ReactNode;
}

const TooltipWrapped: FunctionComponent<TooltipWrappedProps> = (props) =>
  cloneElement(<Tooltip/>, { ...props })

export default TooltipWrapped

[hdodov]

This is a problem with the types, so the types should be fixed:

- export class Tooltip extends React.Component<TooltipProps> {}
+ export class Tooltip extends React.Component<React.PropsWithChildren<TooltipProps>> {}

Until then, @ts-ignore can be used to silence the error:

{/* @ts-ignore */}
<Tooltip>
	<p>Content</p>
</Tooltip>

[hdodov]

I discovered more issues with this package and moved to the official @tippyjs/react.