Can't use React tooltips in another Component

Question

I was trying to make a separated component for React Tooltips so I can use it again in my project, But It seems to not work and gives me an error once the App reloads. The Error

I Already install react-bootstrap and bootstrap using npm i react-bootstrap bootstrap I'm using NextJs with ReactJs.

The Tooltip Component Tooltip.js

import { OverlayTrigger, Tooltip } from 'react-bootstrap';

export default function TitleTooltip({placement = 'top', title = ''}) {
    return (
        <OverlayTrigger
        placement={placement}
        overlay={
            <Tooltip id={`tooltip-${placement}`}>
                {title}
            </Tooltip>
        }
        >
        </OverlayTrigger>
    )
}

The Component I'm trying to use tooltips with Test.js

import TitleTooltip from '../tooltips/Tooltip';
export default function Testing(){
return(
<div>
 <TitleTooltip placement='top' title={'This is some text'}>
  <p>Hover me</p>
 </TitleTooltip>
</div>
)
}

Answer 1

You need to modify the <TitleTooltip> component to receive the children (this is the element that you're wanting the tooltip to apply to, in your case <p>Hover me</p>) and render the child element within the <OverlayComponent> like this:

function TitleTooltip({ children, placement = "top", title = "" }) {
  return (
    <OverlayTrigger
      placement={placement}
      overlay={<Tooltip id={`tooltip-${placement}`}>{title}</Tooltip>}
    >
      {/* Render the child element */}
      {children}
    </OverlayTrigger>
  );
}

Here's a working demo showing how you can re-use the TitleTooltip component.