3.x版本Tooltip中follow与htmlContent一同使用会闪动 #3660

• 闪动的问题，应该是 tooltip dom 元素和鼠标当前点一样导致的，看看是否可以加一个偏移量。

• tooltip 列表元素的点击事件吗？这个完全就是 html 的事件监听， G2 没有额外做其他的事情，也没有办法去做这个。

@hustcc

• 可以帮我调一下看看吗，我在demo尝试设置offset, 似乎没有起作用，鼠标和tooltip元素距离还是贴着的。
• 那tooltip列表元素的点击事件，就是只能注册在全局上了，或者是在tooltip change的时候添加addEventListener

@BoleLee 我来试试看，为啥你们还在用 3.x 的版本，抽空可以升级到 4.x 了。

@BoleLee 我来试试看，为啥你们还在用 3.x 的版本，抽空可以升级到 4.x 了。

我也很想升级，但项目略复杂，是多个小项目组合编译为一个的，antv的版本被全局指定为3.5.8-beta.1, 动版本影响范围较大，其他人的代码也会动到，后续会抽空找合适方案升级

直接外部设置 自定义 tooltip dom 的 css 样式，加一个间距就就没有问题了。

直接外部设置 自定义 tooltip dom 的 css 样式，加一个间距就就没有问题了。

这样闪动解决了，但是没办法进入tooltip, enterable 失效了

另外请教一下，F2示例是允许这样子自定义tooltip的dom，在tooltip列表元素上注册事件就跟vue注册事件方式一样了，G2好像没有这样的用法？

3.x 似乎 enterable 没有的吧，我记得是 4.x 才加入的能力。

3.x 似乎 enterable 没有的吧，我记得是 4.x 才加入的能力。

有的，follow与enterable一起用是可以的，3.x文档也有写的：https://g2-v3.antv.vision/zh/docs/api/tooltip#htmltooltip-%E5%B1%9E%E6%80%A7

你把自定义 tooltip 容器的 css 样式加上变换动画（延迟）。不然鼠标没有办法移动到上面。

transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    background-color: rgba(255, 255, 255, 0.9);

好像一样无法移上去

https://codesandbox.io/s/g2-vue-tooltip-z72gq

• 我把triggerOn关了，然后通过监听interval:mousemove, interval:mouseleave来控制显示/隐藏tooltip, 这样tooltip不会跟着鼠标跑，没有闪动问题，也可以移动上去。
• 关于事件和传参，就通过挂在window全局上来响应，参数只能传字符串和数字，借助tooltip:change 把当前数据存起来

https://codesandbox.io/s/g2-vue-tooltip-z72gq

• 我把triggerOn关了，然后通过监听interval:mousemove, interval:mouseleave来控制显示/隐藏tooltip, 这样tooltip不会跟着鼠标跑，没有闪动问题，也可以移动上去。
• 关于事件和传参，就通过挂在window全局上来响应，参数只能传字符串和数字，借助tooltip:change 把当前数据存起来

因为事件注册在全局上，多个图表时造成覆盖，比较不方便，因此，探索了一种新的方式，跟F2的定制方式类似，通过opacity将原生的tooltip隐藏，同时又利用其已有交互，在change/show/hide时，获取对应数据，来控制定制的toolt显示/隐藏。 好处：事件注册与一般vue事件一样，没有全局污染问题 不足：目前3.x版本测试情况是show/hide可能会比较频繁地触发，导致定制的闪动或没来得及显示 (这个问题在我的项目中mac未出现，windows初始闪动，demo中则很严重，直接不显示) -> 考虑给定制tooltip赋值前，加个防抖，看是否解决问题

demo： https://codesandbox.io/s/g2-vue-tooltip-1-mjzx3?file=/src/App.vue

@hustcc Hi，这边终于有时间把G2升级到4.x了，自定义tooltip 这里遇到个问题，麻烦你帮忙看下： https://codesandbox.io/s/g2-4-x-vue2-custom-tooltip-xvdpdp

用的container来绑定自定义的html，然后数据是在 tooltip:change 时赋值的，上述demo存在2个问题： 1）加上 tooltip:change 后，tooltip出现变得很卡，这个问题在我项目中没有出现，只在demo出现了，我把它暂时注释了； 2）自定义的Tooltip上，点击穿透按钮后，会用新的数据和设置重新绘制图表，调用了chart.destroy(), 然后重新走一遍绘制，问题是：重绘后自定义的Tooltip就不出现了。我在项目中查看，是自定义Tooltip的html被拿走了，但是我console.log(this.$refs.customTooltip)是还有拿到的

以上，麻烦重点帮忙看下问题2，应该怎么解决

已解决，自定义tooltip的html在chart.destroy()时被移除了，因此在挂载前判断是否存在，不存在则自行加入：#4745