Tooltip: Unable to anchor correctly

[HartiganHM]

Hey, all!

One more before the long weekend 😅

I've started using the Tooltip component and am seeing odd behavior where the portal isn't recognizing where to anchor. I've double checked the guidelines and it's wrapped around a focusable element (Button), so I'm not sure what's going on. I do have it working in one instance, just not in another. Below if the information I have. Happy to provide more as needed.

Enjoy the long weekend!

---

Working Tooltip

Code snippet (mapped attachments)

<Box className={styles.attachmentFileName}>
  <CustomIcon
    decorative={false}
    title={`Attached file: ${file.name}`}
  />

  <Tooltip text={file.name}>
    <Text as="p">{StringUtils.truncate(file.name, 9, 9)}</Text>
  </Tooltip>
</Box>

GIF

---

Broken Tooltip

Code snippet (basic Button)

<Tooltip text={acceptedFileTypesTooltip}>
  <Button onClick={handleOpenFileDialog} variant="link">
    <AttachIcon decorative={false} title="Attach files to ticket" />
    {copy.attachButtonValue}
  </Button>
</Tooltip>

GIF

[TheSisb]

Hi @HartiganHM,

I wasn't able to reproduce your bug in Codesandbox: https://codesandbox.io/s/tooltip-position-ixqm3?file=/src/index.tsx
Are you able to reproduce this outside of your product? Is there a chance some custom CSS is conflicting with the Paste styles?

[HartiganHM]

Hey @TheSisb , thanks for the check here. Do you have any idea what style conflicts could be causing this issue? Might help to know what I'm looking for if you have anything in mind. There's a good chance that this is what's happening.

[HartiganHM]

Looking at the elements in the DOM I can see that the Tooltip from our codebase (left) doesn't have the same inline styles as the Tooltip from your Codesandbox (right). As far as I can tell, ours is missing the position, inset, and transform style properties.

Also, I've removed all legacy styles that would possibly interfere and am still seeing this issue. I've checked all of the applied styles to the div with class="__reakit-portal" and there are no differences between ours and the one in your Codesandbox. The only differences I see are the ones I mentioned above with the nested div with id="paste-tooltip-X".

[TheSisb]

Hmm, I'm not sure what could be causing the inline styles to be different. Three high level ideas:

1. Are you passing any addition props to the Tooltip or spreading anything over it like <Tooltip {...props}>?
2. I don't think we ever had this bug in Paste, but just in case: please tell me the version number of core you're using in your project. You might also want to try upgrading it to see if it helps.
3. Is your <Theme.Provider> wrapping the entire app or a nested portion of the app?

Unfortunately this is all I can guess without a working reproduction.

[HartiganHM]

Figured it out! We were extending the Button component from Paste and I realized I wasn't using a forwardRef, so the Tooltip wasn't able to anchor to the underlying button element.

Thanks for the help! 🎉

[TheSisb]

Good to know! Thanks for reporting back with the solution 👍