如何在可缩放的SVG矩形内显示SVG元素的工具提示？

<svg width="500" height="500">
  <rect id="rect" x="100" y="100" width="200" height="100" fill="blue"></rect>
  <foreignObject id="tooltip" width="100" height="50" style="display: none;">
    <div style="background-color: yellow; padding: 10px;">
      This is a tooltip
    </div>
  </foreignObject>
</svg>

<script>
  var rect = document.getElementById('rect');
  var tooltip = document.getElementById('tooltip');

  rect.addEventListener('mouseover', function(event) {
    tooltip.style.display = 'block';
    tooltip.style.left = event.clientX + 'px';
    tooltip.style.top = event.clientY + 'px';
  });

  rect.addEventListener('mouseout', function() {
    tooltip.style.display = 'none';
  });
</script>