Dynamically Positioning a Tooltip Relative to Another Element

function positionTooltip(tooltipElement, targetElement, offset = 10) {
  const targetRect = targetElement.getBoundingClientRect();
  const tooltipRect = tooltipElement.getBoundingClientRect();

  // Calculate tooltip position (e.g., top-center of the target)
  let top = targetRect.top - tooltipRect.height - offset;
  let left = targetRect.left + (targetRect.width / 2) - (tooltipRect.width / 2);

  // Ensure tooltip doesn't go off-screen (basic check)
  if (top < 0) { // If it's above the viewport, position below
    top = targetRect.bottom + offset;
  }
  if (left < 0) { // If it's too far left, align left with target
    left = targetRect.left;
  }
  if (left + tooltipRect.width > window.innerWidth) { // If too far right, align right
    left = targetRect.right - tooltipRect.width;
  }

  // Apply calculated styles (position fixed for viewport-relative positioning)
  Object.assign(tooltipElement.style, {
    position: 'fixed',
    top: `${top}px`,
    left: `${left}px`,
    zIndex: '1000' // Ensure it's on top
  });
}

// Example Usage (assuming you have HTML elements with these IDs):
// <button id="myButton">Hover me for info</button>
// <div id="myTooltip" style="display: none; background: #333; color: white; padding: 5px; border-radius: 3px;">This is a tooltip!</div>

const myButton = document.getElementById('myButton');
const myTooltip = document.getElementById('myTooltip');

if (myButton && myTooltip) {
  myButton.addEventListener('mouseenter', () => {
    myTooltip.style.display = 'block'; // Make visible first to get dimensions
    positionTooltip(myTooltip, myButton);
  });

  myButton.addEventListener('mouseleave', () => {
    myTooltip.style.display = 'none';
  });
}