Using `<Tooltip>` within `<ButtonGroup>` affects styling

[tmelliottjr]

Description

Using <Tooltip> within <ButtonGroup> affects the group's styling.

Expected:

Actual:

Steps to reproduce

<ButtonGroup>
 <Tooltip aria-label="Some text">
  <Button>😜</Button>
 </Tooltip>
 <Tooltip aria-label="Some more text">
  <Button>😳</Button>
 </Tooltip>
 <Tooltip aria-label="Even more text">
  <Button>😭</Button>
 </Tooltip>
</ButtonGroup>

Version

v36.5.0

Browser

Chrome

[github-actions]

Uh oh! @tmelliottjr, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @tmelliottjr, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[siddharthkp]

Ah, yes. This is definitely a bug! I have added this to the agenda for the next prioritisation call (every monday)

@broccolinisoup FYI, something to take care of in #4046 as well!

[broccolinisoup]

Thanks @siddharthkp for the ping! When the button group have text buttons with tooltip, there is a style issue there too. This time, the tooltip style is broken; doesn't have the rounded borders. I suspect this is the issue in the tooltip itself. I added this as a task under https://github.com/github/primer/issues/1244 and will look into it.