如何将Bootstrap Tooltip内的mousemove事件传递给同位置的SVG元素？

• 现有包含<circle>元素的SVG，已为该circle绑定Bootstrap Tooltip，设置container: 'body'确保Tooltip正常显示
• SVG绑定了mousemove事件，预期捕获其边界范围内的所有鼠标移动操作
• 当前异常：鼠标移入Tooltip区域时，Tooltip会拦截鼠标事件，SVG不仅无法接收mousemove事件，还会触发mouseleave，不符合需求
• 曾尝试绑定事件到document，代码如下，但鼠标在Tooltip内时仍无法触发目标事件，且不想通过在Tooltip内捕获事件再手动传递给SVG的方式解决：

  $(document).on('mousemove', $('#hover-circle'), function() {...} ); 
  

相关代码：

var svg = d3.select(panel[0]).append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .on("mousemove", function() { 
       console.log('test');
    });

const hoverCircle = svg.append("g")
    .append("circle")
    .attr("id", "hover-circle")
    .attr("r", 3)
    .attr("cx", xScale(closestIndex))
    .attr("cy", yScale(dataset[closestIndex].y))
    .attr("title", dataset[closestIndex].evalStr)
    .tooltip({
         container: 'body',
         trigger: 'manual'
      })
    .tooltip('show');

核心是让Tooltip不拦截鼠标事件，使事件穿透到下方SVG，通过CSS的pointer-events属性实现：

1. 给目标Tooltip添加自定义类（避免影响全局Tooltip），在初始化时修改template配置：

   .tooltip({
        container: 'body',
        trigger: 'manual',
        template: '<div class="tooltip tooltip-non-blocking" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
     })
   

2. 添加CSS规则禁用Tooltip的鼠标事件拦截：

   .tooltip-non-blocking {
       pointer-events: none;
   }
   /* 若需要Tooltip内文本可选中，单独给tooltip-inner恢复鼠标事件 */
   .tooltip-non-blocking .tooltip-inner {
       pointer-events: auto;
   }
   

设置完成后，鼠标在Tooltip区域移动时，事件会直接穿透到下方SVG，SVG的mousemove事件会正常触发，也不会误触发mouseleave。如果Tooltip需要保留特定交互（如关闭按钮），可单独给对应元素恢复pointer-events: auto。

内容的提问来源于stack exchange，提问作者Raj