fix: tooltip 调整

src/chart/controller/tooltip.ts

@@ -46,7 +46,7 @@ export default class Tooltip extends Controller<TooltipOption> {
     return 'tooltip';
   }
 
-  public init() { }
+  public init() {}
 
   public render() {
     const option = this.view.getOptions().tooltip;
@@ -59,7 +59,8 @@ export default class Tooltip extends Controller<TooltipOption> {
    */
   public showTooltip(point: Point) {
     this.point = point;
-    if (!this.isVisible) { // 如果设置 tooltip(false) 则始终不显示
+    if (!this.isVisible) {
+      // 如果设置 tooltip(false) 则始终不显示
       return;
     }
     const view = this.view;
@@ -99,10 +100,17 @@ export default class Tooltip extends Controller<TooltipOption> {
           // 延迟生成
           this.renderTooltip();
         }
-        this.tooltip.update(mix({}, cfg, {
-          items,
-          title,
-        }, follow ? point : {}));
+        this.tooltip.update(
+          mix(
+            {},
+            cfg,
+            {
+              items,
+              title,
+            },
+            follow ? point : {}
+          )
+        );
         this.tooltip.show();
       }
 
@@ -309,7 +317,8 @@ export default class Tooltip extends Controller<TooltipOption> {
     return [];
   }
 
-  public layout() { }
+  public layout() {}
+
   public update() {
     if (this.point) {
       this.showTooltip(this.point);
@@ -429,11 +438,15 @@ export default class Tooltip extends Controller<TooltipOption> {
       start = center;
     }
 
-    const cfg = deepMix({
-      start,
-      end,
-      container: this.getTooltipCrosshairsGroup(),
-    }, get(tooltipCfg, 'crosshairs', {}), this.getCrosshairsText('x', point, tooltipCfg));
+    const cfg = deepMix(
+      {
+        start,
+        end,
+        container: this.getTooltipCrosshairsGroup(),
+      },
+      get(tooltipCfg, 'crosshairs', {}),
+      this.getCrosshairsText('x', point, tooltipCfg)
+    );
     delete cfg.type; // 与 Crosshairs 组件的 type 冲突故删除
 
     let xCrosshair = this.xCrosshair;
@@ -495,16 +508,23 @@ export default class Tooltip extends Controller<TooltipOption> {
       type = 'Circle';
     }
 
-    cfg = deepMix({
-      container: this.getTooltipCrosshairsGroup()
-    }, cfg, get(tooltipCfg, 'crosshairs', {}), this.getCrosshairsText('y', point, tooltipCfg));
+    cfg = deepMix(
+      {
+        container: this.getTooltipCrosshairsGroup(),
+      },
+      cfg,
+      get(tooltipCfg, 'crosshairs', {}),
+      this.getCrosshairsText('y', point, tooltipCfg)
+    );
     delete cfg.type; // 与 Crosshairs 组件的 type 冲突故删除
 
     let yCrosshair = this.yCrosshair;
     if (yCrosshair) {
       // 如果坐标系发生直角坐标系与极坐标的切换操作
-      if ((coordinate.isRect && yCrosshair.get('type') === 'circle')
-        || (!coordinate.isRect && yCrosshair.get('type') === 'line')) {
+      if (
+        (coordinate.isRect && yCrosshair.get('type') === 'circle') ||
+        (!coordinate.isRect && yCrosshair.get('type') === 'line')
+      ) {
         yCrosshair = new Crosshair[type](cfg);
         yCrosshair.init();
       } else {

src/index.ts

@@ -271,6 +271,7 @@ registerInteraction('tooltip', {
     { trigger: 'plot:touchmove', action: 'tooltip:show', throttle: { wait: 50, leading: true, trailing: false } },
   ],
   end: [
+    { trigger: 'plot:mouseleave', action: 'tooltip:hide' },
     { trigger: 'plot:leave', action: 'tooltip:hide' },
     { trigger: 'plot:touchend', action: 'tooltip:hide' },
   ],

src/interaction/action/component/tooltip.ts

@@ -9,7 +9,9 @@ function hasClass(dom, className) {
     return false;
   }
   let cls = '';
-  if (!dom.className) { return false; }
+  if (!dom.className) {
+    return false;
+  }
   if (!isNil(dom.className.baseVal)) {
     cls = dom.className.baseVal;
   } else {
@@ -77,13 +79,6 @@ class TooltipAction extends Action {
       // 锁定 tooltip 时不隐藏
       return;
     }
-
-    const event = this.context.event;
-    const toElement = get(event, [ 'gEvent', 'originalEvent', 'toElement' ]);
-    if (toElement && (hasClass(toElement, 'g2-tooltip') || isParent(toElement, 'g2-tooltip'))) {
-      // 当鼠标滑入 tooltip 内容框时不隐藏
-      return;
-    }
     this.hideTooltip(view);
     this.location = null;
   }

tests/unit/interaction/action/tooltip-spec.ts

@@ -11,7 +11,7 @@ describe('test tooltip action', () => {
     width: 400,
     height: 400,
     autoFit: false,
-    defaultInteractions: []
+    defaultInteractions: [],
   });
 
   chart.data([
@@ -61,7 +61,7 @@ describe('test sibling tooltip', () => {
     width: 400,
     height: 400,
     autoFit: false,
-    defaultInteractions: []
+    defaultInteractions: [],
   });
 
   const data = [
@@ -79,15 +79,15 @@ describe('test sibling tooltip', () => {
   chart.animate(false);
   chart.tooltip(false);
   chart.scale('year', {
-    sync: true
+    sync: true,
   });
   chart.interaction('legend-filter');
   const view1 = chart.createView({
     region: {
       start: { x: 0, y: 0 },
       end: { x: 1, y: 0.5 },
     },
-    padding: [20, 20, 40, 80]
+    padding: [20, 20, 40, 80],
   });
   view1.data(data);
   view1.tooltip(true);
@@ -99,17 +99,17 @@ describe('test sibling tooltip', () => {
       active: {
         style: {
           stroke: 'red',
-          lineWidth: 1
-        }
-      }
+          lineWidth: 1,
+        },
+      },
     });
 
   const view2 = chart.createView({
     region: {
       start: { x: 0, y: 0.5 },
       end: { x: 1, y: 1 },
     },
-    padding: [20, 20, 40, 80]
+    padding: [20, 20, 40, 80],
   });
   view2.data(data);
   const point = view2
@@ -120,13 +120,13 @@ describe('test sibling tooltip', () => {
       active: {
         style: {
           fill: 'red',
-        }
+        },
       },
       inactive: {
         style: {
           opacity: 0.4,
-        }
-      }
+        },
+      },
     });
 
   chart.render();
@@ -139,26 +139,14 @@ describe('test sibling tooltip', () => {
     context.event = {
       x: first.attr('x'),
       y: first.attr('y') - 1,
-      target: first
+      target: first,
     };
     action.show();
     const firstDom = tooltipDoms[0] as HTMLElement;
     expect(tooltipDoms.length).toBe(1);
     expect((tooltipDoms[0] as HTMLElement).style.visibility).toBe('visible');
   });
 
-  it('over tooltip container, not hide', () => {
-    context.event = {
-      gEvent: {
-        originalEvent: {
-          toElement: tooltipDoms[0],
-        },
-      },
-    };
-    action.hide();
-    expect((tooltipDoms[0] as HTMLElement).style.visibility).toBe('visible');
-  });
-
   it('hide', () => {
     context.event = {};
     action.hide();