如何自定义 tooltip 的位置，避免遮挡？

Question

我在使用VChart图表时，图表的tooltip会被dom的边缘截断。我想了解VChart中如何自定义tooltip的位置来避免这种情况。

Answer 1

解决方案 Solution

VChart中控制tooltip的位置有很多方式，例如实现自定义tooltip，或者指定tooltip的offset参数。

但你遇到的情况其实有简单的办法实现，通过指定Tooltip挂载的dom节点来实现。

默认情况下，tooltip会挂载在页面的body上，因此是不应该出现截断的。你的情况可能是修改了spec.tooltip.parentElement的配置。删除或修改该配置应该就可以了。

代码示例 Code Example

spec.tooltip.parentElement = document.body

结果展示 Results

Demo: https://visactor.io/vchart/demo/line-chart/null-value-line

相关文档 Quote

tooltip：https://visactor.io/vchart/option/barChart#tooltip.parentElement

github：https://github.com/VisActor/VChart

Tooltip tutorials: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts...