diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts index 2d259799ac..27dccd30aa 100644 --- a/src/component/tooltip/TooltipView.ts +++ b/src/component/tooltip/TooltipView.ts @@ -57,6 +57,7 @@ import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat'; import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup'; import { findEventDispatcher } from '../../util/event'; import { clear, createOrUpdate } from '../../util/throttle'; +import { getElementState } from '../../util/states'; const proxyRect = new Rect({ shape: { x: -1, y: -1, width: 2, height: 2 } @@ -582,6 +583,11 @@ class TooltipView extends ComponentView { axisModel.axis, { value: axisValue as number } ); cbParams.axisValueLabel = axisValueLabel; + const data = series.getData(); + const el = data.getItemGraphicEl(dataIndex); + if (el) { + cbParams.status = getElementState(el); + } // Pre-create marker style for makers. Users can assemble richText // text in `formatter` callback and use those markers style. cbParams.marker = markupStyleCreator.makeTooltipMarker( diff --git a/src/util/states.ts b/src/util/states.ts index be452d2cb7..0cc8827100 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -180,6 +180,19 @@ export function setStatesFlag(el: ECElement, stateName: DisplayState) { } } +export function getElementState(el: ECElement): DisplayState { + if (el.selected) { + return 'select'; + } + else if (el.hoverState === 1) { + return 'blur'; + } + else if (el.hoverState === 2) { + return 'emphasis'; + } + return 'normal'; +} + /** * If we reuse elements when rerender. * DON'T forget to clearStates before we update the style and shape. diff --git a/test/tooltip.html b/test/tooltip.html index 070e63b88f..618df647b5 100644 --- a/test/tooltip.html +++ b/test/tooltip.html @@ -52,6 +52,8 @@