use popover API in Tooltip if supported

[mayank99]

Changes

When supported, popover=manual will be used to show the tooltip in the top-layer. In non-supported browsers, the attribute is ignored.

In addition to the popover attribute itself, there are only two changes:

• JS: Calling togglePopover whenever the React state changes.
  • This is guarded using ?. for supporting older browsers.
  • This also required adding a custom TS type, which can be removed in the future.
• CSS: Hiding the tooltip when :popover-open doesn't match.

I kept the existing mechanism (Portal component, z-index property, hidden attribute), so Tooltip will continue to work in browsers that don't support popover.

Testing

All existing tests pass 🚀

Tested manually that hover/focus behaviors are intact and that the tooltip does indeed show in the top layer (This can be verified in Chrome dev tools, for example). Also emulated older browsers by commenting out popover and testing that it works fine.

Updated unit tests to simply check for the presence of the popover attribute. I spent some time looking into adding tests for togglePopover without success, since JSDOM doesn't support it. This is not a big deal imo; the visual tests already serve as a way to ensure that the tooltip is working.

Docs

Added changesets for both CSS and React.

Updated Tooltip documentation to mention that portaling is useful only in browsers that don't support popover.