github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Fix tooltips not always added to badge links

GitOrigin-RevId: d4e80f3bb62bce2083dec261ffd5634510310127
This commit is contained in:
Jessica Lawshe 2024-11-08 09:07:01 -06:00 committed by Copybot
parent 8b0b923063
commit aa782b2737
1 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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'
}
}
})