Tooltips not taking into account the margin of their anchor

[jdrush89]

Describe the bug Tooltips should take into account the margin of the element they are targeting so they open visually pointing to it

Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.

To Reproduce Steps to reproduce the behavior:

1. Take the example:

<Tooltip text="This will immediately impact all organization members"> <Button variant="primary" sx={{ml: 3}}>Save</Button> </Tooltip>

Hover the button to see the tooltip appear off center

Expected behavior The tooltip should take the Button's margin into account when opening so it positions still pointing to its center.

Screenshots This is with a margin-left set on the button

Desktop (please complete the following information):

• OS: iOS
• Browser chrome
• Version: 97.0.4692.71

Additional context It seems like other overlays like the action menu take the anchor's margin into account when positioning.

[siddharthkp]

Hi!

First some housekeeping :)

The example shown in docs: https://primer.style/react/Tooltip is based on the main branch which has unreleased changes to the Tooltip: https://github.com/primer/react/pull/2056. So, if you are using the latest published version in your app(v35.2.1), you would not have the position fixes yet. (I see how this would lead to confusion! Opened an issue: https://github.com/primer/react/issues/2070)

---

I copied the example from the issue and it seems to work in the docs: 🤔

In your screenshot, I see that the margin isn't in the code (is it applied via devtools?).

I'll dig into it a bit more, meanwhile here's a sandbox with the latest release candidate (same as docs) if you'd like to test if this works for your use case: https://codesandbox.io/s/primer-react-35-3-0-rc-wxvtks?file=/src/App.tsx

[lesliecdubs]

👋🏻 @jdrush89 is this still a problem you're seeing?

[jdrush89]

@siddharthkp @lesliecdubs we're on 35.7.0 on dotcom and I'm still seeing the issue. Check the CODEOWNERS badge here: https://github.com/github/github/blob/master/.devcontainer/build-devcontainer.sh?_features=react_repos_code_view It has a margin-right and that's causing the tooltip to appear off center.

Here's the code for that component https://github.com/github/github/blob/master/app/assets/modules/react-blob/components/BlobHeader.tsx#L317

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.