39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
'use strict';
|
|
|
|
[...document.getElementsByClassName('terminology')].forEach(terminology => {
|
|
const horizontalMargin = 20;
|
|
|
|
const topMargin = document
|
|
.getElementsByClassName('site-header')[0]
|
|
.clientHeight;
|
|
|
|
const tooltip = terminology.querySelector('.terminology-tooltip');
|
|
|
|
terminology.addEventListener('mouseenter', () => {
|
|
const tooltipRect = tooltip.getBoundingClientRect();
|
|
|
|
if (tooltipRect.top < topMargin) {
|
|
// doesn't fit on top -> moving to bottom
|
|
tooltip.classList.add('below');
|
|
}
|
|
|
|
let horizontalMove = 0;
|
|
|
|
if (tooltipRect.left < horizontalMargin) {
|
|
// doesn't fit on the left edge -> moving right
|
|
horizontalMove = Math.abs(tooltipRect.left) + horizontalMargin;
|
|
} else if (tooltipRect.right + horizontalMargin > window.innerWidth) {
|
|
// doesn't fit on the right edge -> moving left
|
|
horizontalMove = window.innerWidth - tooltipRect.right - horizontalMargin;
|
|
}
|
|
|
|
tooltip.style.setProperty('--horizontal-move', `${horizontalMove}px`);
|
|
});
|
|
|
|
terminology.addEventListener('mouseleave', () => {
|
|
// reset
|
|
tooltip.style.setProperty('--horizontal-move', '0px');
|
|
tooltip.classList.remove('below');
|
|
});
|
|
});
|