fix: do not set tooltip position when follow is false

antvis · Apr 16, 2020 · 62f5e27 · 62f5e27
1 parent d3a30ed
commit 62f5e27
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts
@@ -102,7 +102,7 @@ export default class Tooltip extends Controller<TooltipOption> {
         this.tooltip.update(mix({}, cfg, {
           items,
           title,
-        }, follow ? point : dataPoint));
+        }, follow ? point : {}));
         this.tooltip.show();
       }
 
@@ -112,7 +112,7 @@ export default class Tooltip extends Controller<TooltipOption> {
       }
     } else {
       // 内容未发生变化，则更新位置
-      if (this.tooltip) {
+      if (this.tooltip && follow) {
         const newPoint = follow ? point : dataPoint;
         this.tooltip.update(newPoint);
         this.tooltip.show(); // tooltip 有可能被隐藏，需要保证显示状态
@@ -134,6 +134,10 @@ export default class Tooltip extends Controller<TooltipOption> {
   }
 
   public hideTooltip() {
+    const { follow } = this.getTooltipCfg();
+    if (!follow) {
+      return;
+    }
     // hide the tooltipMarkers
     const tooltipMarkersGroup = this.tooltipMarkersGroup;
     if (tooltipMarkersGroup) {

diff --git a/tests/unit/chart/controller/tooltip-spec.ts b/tests/unit/chart/controller/tooltip-spec.ts
@@ -20,7 +20,7 @@ describe('Tooltip', () => {
   chart.axis(false);
   chart.legend(false);
   chart.tooltip({
-    follow: false,
+    follow: true,
     shared: true,
     showCrosshairs: true,
     showMarkers: true,
@@ -54,9 +54,9 @@ describe('Tooltip', () => {
     // @ts-ignore
     expect(tooltip.tooltip.get('visible')).toBe(true);
     // @ts-ignore
-    expect(tooltip.tooltip.get('x')).toBe(items[0].x);
+    expect(tooltip.tooltip.get('x')).toBe(point.x);
     // @ts-ignore
-    expect(tooltip.tooltip.get('y')).toBe(items[0].y);
+    expect(tooltip.tooltip.get('y')).toBe(point.y);
 
     // @ts-ignore
     const markerGroup = tooltip.tooltipMarkersGroup;
@@ -72,7 +72,9 @@ describe('Tooltip', () => {
     // @ts-ignore
     expect(tooltipDom.style.boxShadow).toBe('');
     // @ts-ignore
-    expect(tooltipDom.style.backgroundColor).toBe(chart.getTheme().components.tooltip.domStyles['g2-tooltip'].backgroundColor);
+    expect(tooltipDom.style.backgroundColor).toBe(
+      chart.getTheme().components.tooltip.domStyles['g2-tooltip'].backgroundColor
+    );
   });
 
   it('tooltip change', () => {
@@ -88,9 +90,9 @@ describe('Tooltip', () => {
 
     const tooltip = chart.getController('tooltip');
     // @ts-ignore
-    expect(tooltip.tooltip.get('x')).toBe(tooltip.items[0].x);
+    expect(tooltip.tooltip.get('x')).toBe(point.x + 10);
     // @ts-ignore
-    expect(tooltip.tooltip.get('y')).toBe(tooltip.items[0].y);
+    expect(tooltip.tooltip.get('y')).toBe(point.y + 20);
   });
 
   it('hideTooltip', () => {
@@ -448,20 +450,24 @@ describe('showContent', () => {
       line: {
         style: {
           lineDash: [2],
-        }
+        },
       },
       text: {
         position: 'end',
         offset: 5,
         autoRotate: true,
         style: {
           fontSize: 14,
-        }
+        },
       },
-      textBackground: null
+      textBackground: null,
     },
   });
-  chart.interval().position('year*population').color('year').size(100);
+  chart
+    .interval()
+    .position('year*population')
+    .color('year')
+    .size(100);
   chart.render();
 
   it('showContent: false', () => {