echarts [Feature] Remove tooltip DOM or hide it with display: none when it's invisible

kq0g1dla  于 2022-11-19  发布在  Echarts
关注(0)|答案(4)|浏览(169)

What problem does this feature solve?

We now use visibility: hiddenopacity: 0 to hide tooltip ( for fade-in-out animation I guess ). However, because DOM with visibility: hidden still affects layout, the invisible tooltip DOM results in a large empty space, which is problematic.

What does the proposed API look like?

When a tooltip is invisible, the DOM element is useless, we can safely remove it to save memory, or at least we can use display: none to prevent it from affecting layout. However it's harder ( but possible ) to apply fade-in-out animation when it's removed from DOM tree, we can add option tooltip: { animation: 'none' } to remove the fading animation

3xiyfsfu

3xiyfsfu1#

We now hack it with

[style$="opacity: 0;"] {
  display: none !important;
}
roqulrg3

roqulrg32#

How does it affect the layout in your application? Could you please make a simple demo for this behavior?

q5iwbnjs

q5iwbnjs3#

tooltip里面数据很多导致tooltip占位很大。tooltip溢到了可视区域外面占用大量空白空间。见我截图里的滚动条

总之需求就是想办法在tooltip不可见时使用 display:none 或者直接将dom节点移除掉防止不可见的元素占位置

tp5buhyn

tp5buhyn4#

I just found that these are related (maybe even the same). But I don´t see this as a Feature request. For me it´s a Bug. You can find a reproduction jsfiddle in the bug: #17251

相关问题