Tooltip: Do not wrap the tooltip and the trigger in a div

[broccolinisoup]

Changelog

New

Changed

Removed the div wrapper because it was causing styling issues on the icon buttons (WIP PR) and added mouse enter and leave events to the tooltip to make sure it stays open when it is hovered. I don't think we need it but let me know if I am missing anything.

-<div> 👈 wrapper 
  <button>tooltip trigger</button>
  <div>tooltip itself</div>
-</div>

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 2e500db

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	105.56 KB (+0.02% 🔺)
dist/browser.umd.js	106.14 KB (+0.02% 🔺)

[broccolinisoup]

Due to removing the wrapper in the tooltip, I needed to add this to align the inactive visual in center. Let me know if you prefer a different way to do it @mperrotti

[siddharthkp]

Definitely makes sense to avoid an extra wrapper!

Am I right in assuming that because tooltip is now in top layer, removing this wrapper makes no difference to positioning?

[broccolinisoup]

Am I right in assuming that because tooltip is now in top layer, removing this wrapper makes no difference to positioning?

Yes! Because we use popover, tooltip is always on the top layer. Also because we use anchor positioning to set top and left for the tooltip div, it makes no difference how it is placed in the dom. The tests and stories are looking too ✨ @siddharthkp