diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts index 0d3e7745a1..dee3421fc6 100644 --- a/src/chart/controller/tooltip.ts +++ b/src/chart/controller/tooltip.ts @@ -1,6 +1,6 @@ import { CONTAINER_CLASS } from '@antv/component/lib/tooltip/css-const'; -import { deepMix, each, find, flatten, get, isArray, isEqual, isFunction, mix } from '@antv/util'; +import { deepMix, each, find, flatten, get, isArray, isEqual, isFunction, mix, isUndefined } from '@antv/util'; import { Crosshair, HtmlTooltip, IGroup } from '../../dependents'; import Geometry from '../../geometry/base'; import { MappingDatum, Point, TooltipOption } from '../../interface'; @@ -163,6 +163,10 @@ export default class Tooltip extends Controller { */ public lockTooltip() { this.isLocked = true; + if (this.tooltip) { + // tooltip contianer 可捕获事件 + this.tooltip.setCapture(true); + } } /** @@ -170,6 +174,11 @@ export default class Tooltip extends Controller { */ public unlockTooltip() { this.isLocked = false; + const cfg = this.getTooltipCfg(); + if (this.tooltip) { + // 重置 capture 属性 + this.tooltip.setCapture(cfg.capture); + } } /** @@ -305,14 +314,10 @@ export default class Tooltip extends Controller { const option = view.getOptions().tooltip; const theme = view.getTheme(); const defaultCfg = get(theme, ['components', 'tooltip'], {}); - const pointerEvents = (get(option, 'enterable') || this.isLocked) ? 'auto' : (defaultCfg.enterable ? 'auto' : 'none'); - return deepMix({}, defaultCfg, { - domStyles: { - [`${CONTAINER_CLASS}`]: { - pointerEvents, - }, - }, - }, option); + const enterable = isUndefined(get(option, 'enterable')) ? defaultCfg.enterable : get(option, 'enterable'); + return deepMix({}, defaultCfg, option, { + capture: enterable || this.isLocked ? true : false, + }); } private getTitle(items) { diff --git a/tests/unit/chart/view/index-spec.ts b/tests/unit/chart/view/index-spec.ts index 91234eba3f..673c2b0f49 100644 --- a/tests/unit/chart/view/index-spec.ts +++ b/tests/unit/chart/view/index-spec.ts @@ -315,11 +315,15 @@ describe('View', () => { it('lockTooltip', () => { view.lockTooltip(); expect(view.isTooltipLocked()).toBeTrue(); + // @ts-ignore + expect(div.getElementsByClassName('g2-tooltip')[0].style['pointer-events']).toBe('auto'); }); it('unlockTooltip', () => { view.unlockTooltip(); expect(view.isTooltipLocked()).toBeFalse(); + // @ts-ignore + expect(div.getElementsByClassName('g2-tooltip')[0].style['pointer-events']).toBe('none'); }); it('filtered group scale values', () => {