From ce8781e79f5d6ee6561ff55f950ede45a95bdcb8 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Thu, 7 Nov 2024 09:28:17 -0600 Subject: [PATCH] Merge pull request #21694 from overleaf/jel-tooltip-when-needed [web] Only add tooltip to badge links if badge is clipped GitOrigin-RevId: c99f3f0732ed6e8112c1af1063f64bcab152b00d --- .../frontend/js/features/tooltip/index-bs5.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/services/web/frontend/js/features/tooltip/index-bs5.ts b/services/web/frontend/js/features/tooltip/index-bs5.ts index ba40b16daf..43fce91f5a 100644 --- a/services/web/frontend/js/features/tooltip/index-bs5.ts +++ b/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) + } +})