mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 12:41:38 -05:00
aa782b2737
[web] Fix tooltips not always added to badge links GitOrigin-RevId: d4e80f3bb62bce2083dec261ffd5634510310127
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
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 possibleBadgeTooltips = document.querySelectorAll(
|
|
'[data-bs-toggle="tooltip-if-needed"]'
|
|
)
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const footLangTooltip = new Tooltip(footerLanguageElement)
|
|
|
|
allTooltips.forEach(element => {
|
|
// 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'
|
|
}
|
|
}
|
|
})
|