feat(tooltip): tooltip 体验优化，当鼠标离开 tooltip 内容框时，非 locked 状态自动隐藏

antvis · Mar 17, 2020 · 9f8fcad · 9f8fcad
1 parent afb877f
commit 9f8fcad
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts
@@ -308,9 +308,9 @@ export default class Tooltip extends Controller<TooltipOption> {
 
     tooltip.init();
 
+    const tooltipContainer = tooltip.get('container');
     if (cfg.enterable === false) {
       // 优化体验，在 tooltip dom 上加绑事件
-      const tooltipContainer = tooltip.get('container');
       // 如果 tooltip 不允许进入
       tooltipContainer.onmousemove = event => {
         // 避免 tooltip 频繁闪烁
@@ -319,6 +319,14 @@ export default class Tooltip extends Controller<TooltipOption> {
       };
     }
 
+    // 优化：鼠标移入 tooltipContainer 然后再移出时，需要隐藏 tooltip
+    tooltipContainer.onmouseleave = () => {
+      if (!this.view.isTooltipLocked()) {
+        this.hideTooltip();
+      }
+    };
+
+
     this.tooltip = tooltip;
   }
 

diff --git a/tests/bugs/tooltip-spec.ts b/tests/bugs/tooltip-spec.ts
@@ -156,4 +156,49 @@ describe('tooltip', () => {
     const tooltip = chart.ele.getElementsByClassName('g2-tooltip')[0];
     expect(tooltip).toBeDefined();
   });
+
+  it('tooltip hide when mouseleave tooltipContainer', () => {
+    const data = [
+      { year: '1991', value: 15468 },
+      { year: '1992', value: 16100 },
+      { year: '1993', value: 15900 },
+      { year: '1994', value: 17409 },
+      { year: '1995', value: 17000 },
+      { year: '1996', value: 31056 },
+      { year: '1997', value: 31982 },
+      { year: '1998', value: 32040 },
+      { year: '1999', value: 33233 },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 250,
+    });
+
+    chart.data(data);
+    chart.area().position('year*value');
+
+    const moveEvent = jest.fn();
+    chart.on('plot:mousemove', moveEvent);
+
+    chart.render();
+
+    const point = chart.getXY({ year: '1995', value: 17000 });
+    chart.showTooltip(point);
+
+    const tooltip = chart.ele.getElementsByClassName('g2-tooltip')[0];
+    const mousemoveEvent = new MouseEvent('mouseleave', {
+      clientX: 100,
+      clientY: 100,
+    });
+    tooltip.dispatchEvent(mousemoveEvent);
+    // @ts-ignore
+    expect(tooltip.style.visibility).toBe('hidden');
+
+    chart.lockTooltip();
+    chart.showTooltip(point);
+    tooltip.dispatchEvent(mousemoveEvent);
+    // @ts-ignore
+    expect(tooltip.style.visibility).toBe('visible');
+  });
 });