如何在SVG中获取悬停时的自定义工具提示框？

<svg>
  <rect width="100" height="100" fill="blue"></rect>
</svg>

<div id="tooltip" style="display: none;">This is a tooltip</div>

<script>
  const svgElement = document.querySelector('svg');
  const tooltipElement = document.getElementById('tooltip');

  svgElement.addEventListener('mouseover', showTooltip);
  svgElement.addEventListener('mouseout', hideTooltip);

  function showTooltip(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    tooltipElement.style.top = mouseY + 'px';
    tooltipElement.style.left = mouseX + 'px';
    tooltipElement.style.display = 'block';
  }

  function hideTooltip() {
    tooltipElement.style.display = 'none';
  }
</script>