#tooltip with a custom component

7 messages · Page 1 of 1 (latest)

fallow apex
#

Hi,
If we want to use a tooltip with a custom component, we have an error

react-dom.development.js:86 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

So, forwardRef added, no error but nothing appened because tooltip don’t know the ref ?
Thanks.

old owl
fallow apex
#

Thanks but if you do something like this :

import React from "react";
import {Tooltip} from "@nextui-org/react";

const TestComponent = ()=> {

return <p>Hover me</p>
}

export default function App() {
return (
<Tooltip content="I am a tooltip">
<TestComponent/>
</Tooltip>
);
}

It’s not ok

old owl
#

Ye it is because the Tooltip will try to find the element or its reference, you need to pass the reference to your custom component

const TestComponent = React.forwardRef((props, ref) => {
  return (
    <p ref={ref} {...props}>
      Hover me
    </p>
  );
});
fallow apex
#

Hum, i see. I will try again

fallow apex
#

I think i was tired when i did the test with this solution. It’s good 🙏