antd Tooltip 切换页面不会自动消失

[Black-Jacki]

antd Tooltip 切换页面不会自动消失

如图

最小复现Demo: https://codesandbox.io/s/keen-mirzakhani-te12o4?file=/src/index.js

当切换页面的按钮上有Tooltip时，Tooltip不会自动消失，需要返回前一个页面把鼠标移到对应按钮上重新触发才可以。

尝试过 切换页面后获取dom元素设置display: none; 更改className等方法，会影响之后的tooltip效果

想问下有没有什么办法能比较好的全局销毁 Tooltip 又不会影响后面再需要显示的效果

或者react-activation有没有可能解决这个问题呢？

[CJY0208]

大概是 tooltip 需要有一个 mouse leave 的动作才会消失，但 activation 直接撤走了 dom，导致没机会触发鼠标离开了

[Black-Jacki]

有什么好的建议吗，最好是不侵入之前代码的，统一处理的

[CJY0208]

试试这样，让 tooltip 的挂载位置不要在 body 下，而是在当前元素的位置，这样 dom 被移除后，tooltip 的 dom 也会消失

import { Tooltip } from "antd";

Tooltip.defaultProps = {
  getPopupContainer: (triggerNode) => triggerNode.parentNode
};

[Black-Jacki]

我试了下，跳转页面后 新页面是可以消掉tooltip的，但是老页面还是会存在

[CJY0208]

意思是回到老页面后 tooltip 依然会出现吗，没想到什么好办法在外部触发 tooltip 内部的 mouseleave，目前这个方法是改动最小的了

[Black-Jacki]

嗯嗯，是的，回到老页面后依然出现。我先试试能不能结合别的方法一起使用，谢啦

[Black-Jacki]

我这边目前没有，之前只是测试功能，这个分支暂且搁置了

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年2月14日(星期二) 上午10:45 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [CJY0208/react-activation] antd Tooltip 切换页面不会自动消失 (Issue #240)

嗯嗯，是的，回到老页面后依然出现。我先试试能不能结合别的方法一起使用，谢啦

目前有什么解决方案么

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[liuxi0811]

遇到同样的问题，后面如何解决的呀

[FanWalker]

遇到同样的问题，后面如何解决的呀

自己监听onMouseLeave和onMouseEnter，用open属性手动控制显示隐藏，点击的时候设置隐藏就行了

[Black-Jacki]

但是老系统很多页面和组件，一个个改不太现实

[CJY0208]

可以考虑二次封装 antd 的 Tooltip 或者存在类似问题的组件，在其内部增加与 activation 兼容的控制部分，再做全局替换

[Symous]

@Black-Jacki 我遇到了类似的问题，有一个简单粗暴的解决方案，当你切换路由的时候，利用这些弹出式组件点击外部关闭的特性，通过代码模拟点击一下body即可关闭；

[ixdong]

我试了下，跳转页面后 新页面是可以消掉tooltip的，但是老页面还是会存在

同问 遇到一样的问题