嵌套Material UI Tooltip同时触发，e.stopPropagation无效如何解决？

原因说明 #

MUI的Tooltip组件暴露的onOpen是组件层面的业务回调，不属于原生DOM冒泡事件，所以在这个回调里调用stopPropagation无法阻止事件向上冒泡到父级元素的Tooltip触发逻辑。

解决方案 #

在子Tooltip包裹的目标元素上，阻止mouseover、mouseenter两个原生hover事件的冒泡即可，这两个事件是MUI Tooltip默认识别的hover触发源。修改后的代码如下：

<Tooltip title="main container">
  <Button style={{ background: "red", color: "white" }}>
    <Tooltip title="child container">
      <Button
        style={{ background: "green", color: "white" }}
        onMouseOver={e => e.stopPropagation()}
        onMouseEnter={e => e.stopPropagation()}
      >
        Child
      </Button>
    </Tooltip>
  </Button>
</Tooltip>

补充说明 #

如果你的Tooltip配置了点击触发的交互，还需要额外给子元素加onClick={e => e.stopPropagation()}避免父级Tooltip被点击事件触发。

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