From: Mark Otto <markd.otto@gmail.com>
Date: Sat, 27 Jun 2026 03:16:06 +0000 (-0700)
Subject: Docs: navbar menu buttons, menu JS toggle, delegated tooltips (#42552)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=ab187653b1efb87d3e269b37a3a8ca3dd9fa76e0;p=thirdparty%2Fbootstrap.git

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 7d9f73aff9..5d8e92ca67 100644
--- 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 075fbd15ac..5ad7a77f2c 100644
--- 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 06c2720021..df794f50b2 100644
--- 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>