mirror of
https://github.com/overleaf/overleaf.git
synced 2025-01-27 01:01:24 +00:00
16e65edd0d
[web] Only trigger footer tooltip if target element is available GitOrigin-RevId: e0aff735243369a0d2180174231951054f1ee533
45 lines
1.6 KiB
TypeScript
45 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
|
|
if (footerLanguageElement) {
|
|
// eslint-disable-next-line no-new
|
|
new Tooltip(footerLanguageElement)
|
|
}
|
|
|
|
const allTooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
|
allTooltips.forEach(element => {
|
|
// eslint-disable-next-line no-unused-vars
|
|
const tooltip = new Tooltip(element)
|
|
})
|
|
|
|
const possibleBadgeTooltips = document.querySelectorAll('[data-badge-tooltip]')
|
|
possibleBadgeTooltips.forEach(element => {
|
|
// Put data-badge-tooltip 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'
|
|
}
|
|
}
|
|
})
|