Always set :absolute position on Primer::Alpha::Tooltip

[jonrohan]

I was working on SegmentedController and noticed a small size jump with the components. It turns out because there's a moment before the Javascript is loaded in that the Tooltip is hidden, but is taking up dom space. It isn't noticeable in our previews because we're only rendering one of the items that have a tooltip, but I disabled JS for the screenshot below and put a second button in line.

I think we should have a hardcoded position: absolute; css that will keep the element out of the flow even when JS fails to load. I opted for adding the system argument, but I'm open to other ways.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8e0d302

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[khiga8]

ah, this is most likely because of the recent #1256.

We had to switch from using hidden to visibility:hidden; to hide the tooltip as a workaround for a bug discovered by James in screen readers. This bug is likely specific to custom element + accessibility API. We also discovered that display: none had the same issue for SR users.

visibility: hidden; let us get around the bug and helps us properly expose accessible names and descriptions but there's the caveat that it takes up space.

this change to make sure the tooltip is out of the document flow on page load should be good 👍. thank you!!