Add a "Close" tooltip to close buttons

site/assets/js/snippets.js

@@ -81,9 +81,21 @@
 
  function alert(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"><span class="visually-hidden">Close</span></button></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" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+ <span class="visually-hidden">Close</span></button></div>`
 
  alertPlaceholder.append(wrapper)
+
+ // Create btn-close's tooltip after innerHTML has been modified
+ const tooltip = new boosted.Tooltip(wrapper.querySelector('.btn-close'))
+ // Hide tooltip when clicking on live alert's btn-close
+ wrapper.querySelectorAll('.btn-close').forEach(closeBtn => {
+ closeBtn.addEventListener('click', () => {
+ tooltip.hide()
+ })
+ })
  }
 
  if (alertTrigger) {

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

@@ -71,7 +71,7 @@ const alert = (message, type, typeVisuallyHidden) => {
  ' <p>',
  ` ${message}`,
  ' </p>',
- ' <button type="button" class="btn-close" data-bs-dismiss="alert">',
+ ' <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>'
@@ -148,7 +148,7 @@ You can see this in action with a live demo:
 <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 >}}
 
@@ -177,7 +177,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

@@ -13,37 +13,37 @@ 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>
+<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>
+<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>
+<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">
+<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>