feat(close button): add a "Close" tooltip (#1823)

* Add tooltip on close btn for button close + modals + alerts + toasts + offcanvas.

Co-authored-by: Julien Déramond <[email protected]>

site/assets/js/snippets.js

@@ -77,32 +77,37 @@
  // -------------------------------
  // Used in 'Show live alert' example in docs or StackBlitz
 
- // Boosted mod: adapted innerHTML to have the icon and so added a parameter within `alert()` function
+ // Boosted mod: adapted innerHTML to have the icon and so added a parameter within `appendAlert()` and a tooltip on `.btn-close`
  // js-docs-start live-alert
  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
- const alert = (message, type, typeVisuallyHidden) => {
+ const appendAlert = (message, type, typeVisuallyHidden) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
  `<div class="alert alert-${type} alert-dismissible" role="alert">`,
  ' <span class="alert-icon">',
  ` <span class="visually-hidden">${typeVisuallyHidden}</span>`,
  ' </span>',
- ' <p>',
- ` ${message}`,
- ' </p>',
- ' <button type="button" class="btn-close" data-bs-dismiss="alert">',
+ ` <p>${message}</p>`,
+ ' <button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">',
  ' <span class="visually-hidden">Close</span>',
  ' </button>',
  '</div>'
  ].join('')
 
  alertPlaceholder.append(wrapper)
+
+ // Create `.btn-close` tooltip after `innerHTML` has been modified
+ const btnClose = wrapper.querySelector('.btn-close')
+ const tooltip = new boosted.Tooltip(btnClose)
+ btnClose.addEventListener('click', () => {
+ tooltip.hide()
+ })
  }
 
  const alertTrigger = document.getElementById('liveAlertBtn')
  if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
- alert('Nice, you triggered this alert message!', 'success', 'Success')
+ appendAlert('Nice, you triggered this alert message!', 'success', 'Success')
  })
  }
  // js-docs-end live-alert

site/content/docs/5.3/components/alerts.md

@@ -110,29 +110,32 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 - Be sure you've loaded the alert plugin, or the compiled Boosted JavaScript.
 - Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
 - On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
+- On the close button, add the `data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"` attributes, which add a tooltip for better accessibility. You also need to [enable tooltips]({{< docsref "/components/tooltips#enable-tooltips" >}}) (if not already done).
 - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
 
 You can see this in action with a live demo:
 
-{{< example >}}
+{{< example stackblitz_add_js="true" >}}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
  <p>Warning notification text goes here.</p>
- <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 </div>
 {{< /example >}}
 
 {{< callout warning >}}
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
+{{% enable-btn-close-tooltip 4 alerts %}}
+
 ## Dark variant
 
 {{< added-in "5.2.0" >}}
 
 Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted as well by using the [dark variant of close button]({{< docsref "/components/close-button#dark-variant" >}})
 
-{{< example class="bg-dark" >}}
+{{< example class="bg-dark" stackblitz_add_js="true" >}}
 <div class="alert alert-success bg-dark" role="alert">
  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
  <p>Success notification text goes here.</p>
@@ -147,7 +150,7 @@ Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted
 <div class="alert alert-warning alert-dismissible fade show bg-dark" role="alert">
  <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
  <p>Warning notification text goes here.</p>
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 </div>
 {{< /example >}}
 

site/content/docs/5.3/components/close-button.md

@@ -12,43 +12,45 @@ toc: true
 
 Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `mask-image`. **Be sure to include text for screen readers**, as we've done with `<span class="visually-hidden">`.
 
-{{< example >}}
-<button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>
+{{< example stackblitz_add_js="true" >}}
+<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
 ## Disabled state
 
 Disabled close buttons change their `color`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
-{{< example >}}
-<button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>
+{{< example stackblitz_add_js="true" >}}
+<button type="button" class="btn-close" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
 ## Dark variant
 
 Add `.btn-close-white` to the `.btn-close` for a dark variant.
 
-{{< example class="bg-dark" >}}
-<button type="button" class="btn-close btn-close-white"><span class="visually-hidden">Close</span></button>
-<button type="button" class="btn-close btn-close-white" disabled><span class="visually-hidden">Close</span></button>
+{{< example class="bg-dark" stackblitz_add_js="true" >}}
+<button type="button" class="btn-close btn-close-white" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+<button type="button" class="btn-close btn-close-white" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
 ## Without specific class
 
 Close buttons can also be created without `.btn-close` to reduce the size of your CSS bundle.
 
-{{< example >}}
-<button type="button" class="btn btn-icon btn-no-outline">
+{{< example stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 
-<button type="button" class="btn btn-icon btn-no-outline" disabled>
+<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 {{< /example >}}
 
+{{% enable-btn-close-tooltip 2 %}}
+
 ## CSS
 
 ### Variables