How to pass a custom component to title props in MUI tooltip? - reactjs

Question

I am trying to customize a Tooltip component by passing a custom component like the image.
At first time, I've used Popover once, but the main reason why I am going to use Tooltip is because of the arrow of Tooltip.
Basically, I am using React and MUI v5 running on TypeScript.
I built a custom Tooltip component like this.
<Tooltip
open={open}
arrow
placement={placement}
title={
<Box component="span" p={1} width={width}>
<IconButton size="small" onClick={onClose}>
<CloseIcon />
</IconButton>
<Box my={2} px={4}>
<Typography my={2}>
{message}
</Typography>
<FormControlLabel control={<Checkbox defaultChecked />} label="Don’t show again" />
</Box>
</Box>
}
{...rest}
>
{children}
</Tooltip>
It seems to be working, but it keeps saying an error message Tooltip title. Zero-length titles string are never displayed. 'title' is specified more than once, so this usage will be overwritten.ts(2783).
How can I resolve this issue, or should I use Popover rather than Tooltip component?

Answer 1

You need to move title prop after {...rest} parameters.
It looks like your rest paramaters already have title property inside, so basically you are overwriting your title with something else from rest parameters (at least typescript thinks that).
It is the same as:
const foo = { title: 'aaaa', sth: 'cccc' };
const bar = { title: 'bbbb', ...foo}
console.log(bar.title); // => 'aaaa'
If you open this code in some environment with typescript support, it will also show same error as yours, see
What you need to do is:
const foo = { title: 'aaaa', sth: 'cccc' };
const bar = { ...foo, title: 'bbbb' };
console.log(bar.title); // => 'bbbb'