Fix StackBlitz Popovers and Tooltips examples (#36449)

* Fix StackBlitz Popovers and Tooltips examples

* Rename shortcode example parameters

* Reorder example shortcode doc params + fix Cspell

* Remove 'stackblitz' param + use data-bs-title instead of title

* Update site/layouts/partials/callout-warning-data-bs-title-vs-title.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/.cspell.json b/.cspell.json
index 6062c53c31bec78dbc21a5a84ffbb11d262bd9f6..2ba78447b23ed2a7eee1f5a852a13df066b44602 100644 (file)
--- 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 6962b7155f6cbb68eafaf625e935ffd61da18edd..8837ed46cdfdcfd8bfd7e6051e5d39e31a325ab9 100644 (file)
--- 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" >}}
 <div id="liveAlertPlaceholder"></div>
 <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
 {{< /example >}}

diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md
index 0e2afd85a351af805071aedcf4e2be8e872ce831..aa6012cb0652bad87cdfcd054c5249516299c09d 100644 (file)
--- 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" >}}
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md
index a08850f94cf5eba8fb93b39be8a01198207e0863..d6f1750ca30184e847f14ff1a72e73c152918973 100644 (file)
--- 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" >}}
 <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 {{< /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" >}}
 <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
   Popover on top
 </button>
@@ -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" >}}
 <button type="button" class="btn btn-secondary"
         data-bs-toggle="popover" data-bs-placement="right"
         data-bs-custom-class="custom-popover"
-        title="Custom popover"
+        data-bs-title="Custom popover"
         data-bs-content="This popover is themed via CSS variables.">
   Custom popover
 </button>
@@ -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 `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
 {{< /callout >}}
 
-{{< example js_snippet="true" >}}
-<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+{{< example stackblitz_add_js="true" >}}
+<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
 {{< /example >}}
 
 ```js
@@ -123,7 +127,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 
 For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
 
-{{< example js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
   <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>

diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md
index 3cae1998b0a16ec82c1b86e30c075e57400a2e78..63fa3174e0268eaf4ea982e4328fbcb1bb74b47b 100644 (file)
--- 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" >}}
 <form>
   <div class="mb-3">
     <label for="selectToastPlacement">Toast placement</label>

diff --git a/site/content/docs/5.2/components/tooltips.md b/site/content/docs/5.2/components/tooltips.md
index ef5944b489af6895a310f88a8f7a056fa439dcd1..7056ca06871af69046a16fb03d0757f1dc356c27 100644 (file)
--- 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" >}}
-<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. 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 <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
+<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. 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 <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
 </p>
 {{< /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" >}}
 <button type="button" class="btn btn-secondary"
         data-bs-toggle="tooltip" data-bs-placement="top"
         data-bs-custom-class="custom-tooltip"
-        title="This top tooltip is themed via CSS variables.">
+        data-bs-title="This top tooltip is themed via CSS variables.">
   Custom tooltip
 </button>
 {{< /example >}}
@@ -74,25 +78,25 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
 
 <div class="bd-example tooltip-demo">
   <div class="bd-example-tooltips">
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
   </div>
 </div>
 
 ```html
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
   Tooltip on top
 </button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
   Tooltip on right
 </button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
   Tooltip on bottom
 </button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
   Tooltip on left
 </button>
 ```
@@ -100,7 +104,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
 And with custom HTML added:
 
 ```html
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>
 ```
@@ -108,7 +112,7 @@ And with custom HTML added:
 With an SVG:
 
 <div class="bd-example tooltip-demo">
-  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="Default tooltip">
+  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
     <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
       <rect width="100%" height="100%" fill="#563d7c"/>
       <circle cx="50" cy="50" r="30" fill="#007bff"/>
@@ -165,7 +169,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 
 ```html
 <!-- HTML to write -->
-<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
+<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
 
 <!-- Generated markup by the plugin -->
 <div class="tooltip bs-tooltip-top" role="tooltip">
@@ -182,7 +186,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 
 <div class="tooltip-demo">
 {{< example >}}
-<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
+<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
   <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>
 {{< /example >}}

diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md
index d719689d3b2792a7b9342a1dcb8477a14d7a9348..5c7ab52616ca4c77cfca2fbe4bebe6d07e826488 100644 (file)
--- a/site/content/docs/5.2/forms/checks-radios.md
+++ b/site/content/docs/5.2/forms/checks-radios.md
@@ -36,7 +36,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
 
 Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
-{{< example class="bd-example-indeterminate" js_snippet="true" >}}
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
   <label class="form-check-label" for="flexCheckIndeterminate">

diff --git a/site/layouts/partials/callout-warning-data-bs-title-vs-title.md b/site/layouts/partials/callout-warning-data-bs-title-vs-title.md
new file mode 100644 (file)
index 0000000..e932f22
--- /dev/null
+++ b/site/layouts/partials/callout-warning-data-bs-title-vs-title.md
@@ -0,0 +1 @@
+Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.

diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index 5535d64391484def35d689172a1e1441c6de4cc3..477ba76e5888f2cb2ab3e4de9b18cc416d0ab2e1 100644 (file)
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -30,7 +30,7 @@
       // Get extra classes for this example except '.bd-example'
       const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).filter(x => x !== 'bd-example').join(' ')
 
-      const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-js-snippet')
+      const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
       StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
     })
   })

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index a1685a0a6be8ecda4e25271667b74db35be083ef..3cbbd9fca9b7fdf2dbc20fcdf15830a6f5ea5d34 100644 (file)
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -4,17 +4,18 @@
   `args` are all optional and can be one of the following:
     * id: the `div`'s id - default: ""
     * class: any extra class(es) to be added to the `div` - default: ""
-    * js_snippet: add extra JS snippet to StackBlitz - default: `false`
-    * show_preview: if the preview should be output in the HTML - default: `true`
+    * lang: language used to display the code - default: "html"
     * show_markup: if the markup should be output in the HTML - default: `true`
+    * show_preview: if the preview should be output in the HTML - default: `true`
+    * stackblitz_add_js: if extra JS snippet shoud le added to StackBlitz - default: `false`
 */ -}}
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
 {{- $lang := .Get "lang" | default "html" -}}
-{{- $show_preview := .Get "show_preview" | default true -}}
+{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
-{{- $js_snippet := .Get "js_snippet" | default false -}}
+{{- $show_preview := .Get "show_preview" | default true -}}
 {{- $input := .Inner -}}
 
 <div class="bd-example-snippet bd-code-snippet">
@@ -29,7 +30,7 @@
       <div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
         <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
-          <button type="button" class="btn-edit text-nowrap"{{ with $js_snippet }} data-js-snippet="{{ $js_snippet }}"{{ end }} title="Try it on StackBlitz">
+          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
             <svg class="bi" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">