diff --git a/.cspell.json b/.cspell.json index 6062c53c31be..2ba78447b23e 100644 --- a/.cspell.json +++ b/.cspell.json @@ -93,6 +93,7 @@ "semibold", "socio", "srcset", + "stackblitz", "stickied", "Stylelint", "subnav", diff --git a/site/content/docs/5.2/components/alerts.md b/site/content/docs/5.2/components/alerts.md index 6962b7155f6c..8837ed46cdfd 100644 --- a/site/content/docs/5.2/components/alerts.md +++ b/site/content/docs/5.2/components/alerts.md @@ -27,7 +27,7 @@ Alerts are available for any length of text, as well as an optional close button Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. -{{< example js_snippet="true" >}} +{{< example stackblitz_add_js="true" >}}
{{< /example >}} diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md index 0e2afd85a351..aa6012cb0652 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.2/components/modal.md @@ -444,7 +444,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. -{{< example js_snippet="true" >}} +{{< example stackblitz_add_js="true" >}} diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md index a08850f94cf5..d6f1750ca301 100644 --- a/site/content/docs/5.2/components/popovers.md +++ b/site/content/docs/5.2/components/popovers.md @@ -44,9 +44,13 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra ### Live demo -We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `title` attribute and body content is set via `data-bs-content`. +We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`. -{{< example js_snippet="true" >}} +{{< callout warning >}} +{{< partial "callout-warning-data-bs-title-vs-title.md" >}} +{{< /callout >}} + +{{< example stackblitz_add_js="true" >}} {{< /example >}} @@ -54,7 +58,7 @@ We use JavaScript similar to the snippet above to render the following live popo Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction. -{{< example js_snippet="true" >}} +{{< example stackblitz_add_js="true" >}} @@ -87,11 +91,11 @@ You can customize the appearance of popovers using [CSS variables](#variables). {{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}} -{{< example class="custom-popover-demo" js_snippet="true" >}} +{{< example class="custom-popover-demo" stackblitz_add_js="true" >}} @@ -107,8 +111,8 @@ Use the `focus` trigger to dismiss popovers on the user's next click of a differ For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the ` diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md index 3cae1998b0a1..63fa3174e026 100644 --- a/site/content/docs/5.2/components/toasts.md +++ b/site/content/docs/5.2/components/toasts.md @@ -197,7 +197,7 @@ Building on the above example, you can create different toast color schemes with Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`. -{{< example js_snippet="true" >}} +{{< example stackblitz_add_js="true" >}}
diff --git a/site/content/docs/5.2/components/tooltips.md b/site/content/docs/5.2/components/tooltips.md index ef5944b489af..7056ca06871a 100644 --- a/site/content/docs/5.2/components/tooltips.md +++ b/site/content/docs/5.2/components/tooltips.md @@ -45,11 +45,15 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra Hover over the links below to see tooltips: -{{< example class="tooltip-demo" js_snippet="true" >}} -

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project. +{{< example class="tooltip-demo" stackblitz_add_js="true" >}} +

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

{{< /example >}} +{{< callout warning >}} +{{< partial "callout-warning-data-bs-title-vs-title.md" >}} +{{< /callout >}} + ### Custom tooltips {{< added-in "5.2.0" >}} @@ -59,11 +63,11 @@ You can customize the appearance of tooltips using [CSS variables](#variables). {{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}} -{{< example class="tooltip-demo" js_snippet="true" >}} +{{< example class="tooltip-demo" stackblitz_add_js="true" >}} {{< /example >}} @@ -74,25 +78,25 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
- - - - - + + + + +
```html - - - - ``` @@ -100,7 +104,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo And with custom HTML added: ```html - ``` @@ -108,7 +112,7 @@ And with custom HTML added: With an SVG:
- + @@ -165,7 +169,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo ```html -Hover over me +Hover over me