Docs: Add tooltips to buttons when <Example> is used, not just <Code>

[louismaximepiton]

Description

I've updated the Example in order to use our Code component.
I've updated Code to be embedded inside other components.
We add a new empty div and a div without any class, but it's better than nothing for now.

Motivation & Context

The issue comes from the fact that the Code component initiates the tooltip both for the clipboard and stackblitz button, but the Code component only embed the clipboard button. On the other side, the Code component is used by JsDocs, ScssDocs and by itself in the documentation (so via ``` and the help of <Content components={{ pre: Code }} /> inside `[...slug].astro`) but not by the Example component.

Previously, it used to work because most pages have either a ``` or a ScssDocs or JsDocs inside the page. Since Astro bundle the JS and clean the bundled JS, if at least one occurrence was present in the page, the Code component JS was interpreted on the whole page and only once. We have the issue on Button Group since we don't have any Code component reference inside.

So here the quick fix is only to use Code whenever it's possible (So in Example component) to add the JS everywhere it's needed. It's not ideal but a quick fix. If you have a better solution to introduce the requested JS everywhere, feel free to change it.

Since the default syntax highlighter is Prism (in astro.config.ts) we can't see any difference on the doc.

With special thanks to @MaxLardenois.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41582--twbs-bootstrap.netlify.app/docs/5.3/components/button-group
• https://deploy-preview-41582--twbs-bootstrap.netlify.app/docsref

Related issues

Closes #41579

[julien-deramond]

Good catch, @hannahiss, and thanks for the fix, @louismaximepiton and @MaxLardenois!

The quick fix here is to use Code whenever possible (e.g., in the Example component) so the JS is included wherever needed. It’s not ideal, but it works for now. If you have a better approach to inject the required JS globally, feel free to propose it.

While there might be a cleaner long-term solution, your fix is well-scoped and easy to follow. Let’s move forward with it for now.

I checked a good portion of the docs, and it fixes issues in "Buttons group", several "Helpers" pages like "Color & background", "Colored links", "Stretched link", and more.