Merge pull request #21694 from overleaf/jel-tooltip-when-needed

[web] Only add tooltip to badge links if badge is clipped

GitOrigin-RevId: c99f3f0732ed6e8112c1af1063f64bcab152b00d

services/web/frontend/js/features/tooltip/index-bs5.ts

@@ -6,6 +6,10 @@ const footerLanguageElement = document.querySelector(
 
 const allTooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
 
+const possibleTooltips = document.querySelectorAll(
+  '[data-bs-toggle="tooltip-if-needed"]'
+)
+
 // eslint-disable-next-line no-unused-vars
 const footLangTooltip = new Tooltip(footerLanguageElement)
 
@@ -13,3 +17,15 @@ allTooltips.forEach(element => {
   // eslint-disable-next-line no-unused-vars
   const tooltip = new Tooltip(element)
 })
+
+possibleTooltips.forEach(element => {
+  // put data-bs-toggle="tooltip-if-needed" on .badge-content
+  // then tooltip is only shown if .badge is clipped due to max-width
+  if (
+    element.parentElement &&
+    element.scrollWidth > element.parentElement?.scrollWidth
+  ) {
+    // eslint-disable-next-line no-unused-vars
+    const tooltip = new Tooltip(element)
+  }
+})