0
118
ViewsReact Portal Not Working With A Tooltip Component
I'm trying to use react-portal with my tooltip component. There are no errors, however it does not appear to be working:
- The tooltip is still partially hidden by its parent container with
overflow:hidden - I do not see it added to a new div outside of
#root.
import { Portal } from 'react-portal';
return (
<>
<Wrapper
onMouseEnter={showTip}
onMouseLeave={hideTip}
ref={triggerRef}
>
{children}
</Wrapper>
{render && (
<Portal node={triggerRef.current}>
<Content
placement={placement}
fade={active}
>
{content}
</Content>
</Portal>
)}
</>
);
Here's the Codesandbox for full code.
·
Juan Pablo Isaza
1 answers
Answer question0
I think there is nothing wrong with react portal , the problem is your style , I made a little change in your portal.js file:
if (typeof window === "object") {
if (target) {
root = document.getElementById("root");
}
el = document.createElement("div");
el.setAttribute('style', 'position:relative'); // this line
el.id = "portal-root";
}
because your tooltip displayed right on your text and
onMouseLeave immediately called and tooltip hides again
so in the styled component and in the top case when I changed bottom style:
${({ placement }) =>
placement === "top" &&
css`
bottom: calc(100% + 50px); // this line
&::before {
top: calc(100% - 10px);
}
`}
and its works:
·
Juan Pablo Isaza
Report
Answer question