Check if an element is being displayed in the current viewport

checkVisibilityAndShowTooltip.js

// `element` - the reference from the references section
function checkVisibilityAndShowTooltip(element, tooltipElement) {
  const rect = element.getBoundingClientRect();
  const isVisible = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);

  // Update tooltip visibility based on preference
  if (isVisible) {
    element.dataset.isVisible = 'true';  // Or use a custom class
  } else {
    tooltipElement.style.display = 'block';  // Or use a custom class or property
  }
}

// Usage:
const element = document.querySelector('#cite_note-8'); // this is the reference ID
const tooltip = document.querySelector('your-tooltip-id-here');

// Add event listeners for rechecking visibility on scroll or resize:
window.addEventListener('scroll', () => checkVisibilityAndShowTooltip(element, tooltip));
window.addEventListener('resize', () => checkVisibilityAndShowTooltip(element, tooltip));