Merge pull request #21733 from overleaf/jel-tooltip-badges

[web] Fix tooltips not always added to badge links

GitOrigin-RevId: d4e80f3bb62bce2083dec261ffd5634510310127

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

@@ -1,12 +1,23 @@
 import { Tooltip } from 'bootstrap-5'
 
+function getElementWidth(el: Element) {
+  const elComputedStyle = window.getComputedStyle(el)
+  const elPaddingX =
+    parseFloat(elComputedStyle.paddingLeft) +
+    parseFloat(elComputedStyle.paddingRight)
+  const elBorderX =
+    parseFloat(elComputedStyle.borderLeftWidth) +
+    parseFloat(elComputedStyle.borderRightWidth)
+  return el.scrollWidth - elPaddingX - elBorderX
+}
+
 const footerLanguageElement = document.querySelector(
   '[data-ol-lang-selector-tooltip]'
 ) as Element
 
 const allTooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
 
-const possibleTooltips = document.querySelectorAll(
+const possibleBadgeTooltips = document.querySelectorAll(
   '[data-bs-toggle="tooltip-if-needed"]'
 )
 
@@ -18,14 +29,20 @@ allTooltips.forEach(element => {
   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)
+possibleBadgeTooltips.forEach(element => {
+  // Put data-bs-toggle="tooltip-if-needed" on .badge-content
+  // then tooltip is only shown if content is clipped due to max-width on .badge
+  // Due to font loading, the width calculated on page load might change, so we might
+  // incorrectly determine a tooltip is not needed. This is why max-width will always be set to none
+  // if no tooltip is shown so that content is fully visible in those scenarios.
+
+  if (element.parentElement) {
+    const parentWidth = getElementWidth(element.parentElement)
+    if (element.scrollWidth > parentWidth) {
+      // eslint-disable-next-line no-unused-vars
+      const tooltip = new Tooltip(element)
+    } else {
+      element.parentElement.style.maxWidth = 'none'
+    }
   }
 })