Docs: navbar menu buttons, menu JS toggle, delegated tooltips (#42552)

* Docs: use <button> for navbar menu toggles instead of <a href="#">

A menu toggle is a button, not a link. Replace the navbar dropdown
toggles' `<a href="#" role="button">` with semantic `<button>`
(.nav-link already resets button styling). Fixes #40995.

* Docs: show how to open/close/toggle a menu via the JS API

The Via JavaScript section only showed instantiation. Add an example
using getOrCreateInstance().show()/hide()/toggle(). Fixes #37042.

* Docs: document delegated tooltips via the selector option

Add an example initializing one Tooltip on a parent with the selector
option to cover many (and dynamically-added) triggers. Fixes #41020.

diff --git a/site/src/content/docs/components/menu.mdx b/site/src/content/docs/components/menu.mdx
index 7d9f73aff9b5564d50e1c392552fb160df1c8734..5d8e92ca6736d74ab26c9b3235ae1fd1b515dfd8 100644 (file)
--- a/site/src/content/docs/components/menu.mdx
+++ b/site/src/content/docs/components/menu.mdx
@@ -606,6 +606,17 @@ const menuElementList = document.querySelectorAll('[data-bs-toggle="menu"]')
 const menuList = [...menuElementList].map(menuToggleEl => new bootstrap.Menu(menuToggleEl))
 ```
 
+To open, close, or toggle a menu programmatically, get its instance from the trigger element (the one with `data-bs-toggle="menu"`) and call the corresponding method:
+
+```js
+const menuToggleEl = document.querySelector('#myMenuToggle')
+const menu = bootstrap.Menu.getOrCreateInstance(menuToggleEl)
+
+menu.show()
+menu.hide()
+menu.toggle()
+```
+
 ### Dependencies
 
 The menu plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:

diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 075fbd15ac4a86d60a5f4d7243ff75142e3e8ac0..5ad7a77f2c457adff402c8f32842905fa5683f45 100644 (file)
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -37,9 +37,9 @@ Here’s a navbar that includes most supported sub-components and a responsive r
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -221,9 +221,9 @@ You can also use menus in your navbar. Menus require a wrapping element for posi
               <a class="nav-link" href="#">Pricing</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu link
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -350,9 +350,9 @@ To make a navbar dark, add `data-bs-theme="dark"` to the `.navbar` element.
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>

diff --git a/site/src/content/docs/components/tooltip.mdx b/site/src/content/docs/components/tooltip.mdx
index 06c272002196dc80b53e1dbbd8e8f013758a4bb9..df794f50b25aa08a5e5c9603fb28350edde9c7b5 100644 (file)
--- a/site/src/content/docs/components/tooltip.mdx
+++ b/site/src/content/docs/components/tooltip.mdx
@@ -171,6 +171,16 @@ const tooltip = new bootstrap.Tooltip('#example', {
 
 </Callout>
 
+### Delegated tooltips
+
+To enable tooltips on many triggers at once—including elements added to the DOM later—initialize a single instance on a parent element and pass the [`selector` option](#options). Any matching descendant gets a tooltip without re-initializing:
+
+```js
+const tooltip = new bootstrap.Tooltip(document.body, {
+  selector: '[data-bs-toggle="tooltip"]'
+})
+```
+
 ### Via data attributes
 
 <BsTable>