diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts index 96a43c3789..eac9277ac1 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts @@ -17,7 +17,7 @@ import type { ILayoutPoint } from '../../../typings'; import { TooltipHandlerType } from '../../../component/tooltip/constant'; import { getSvgHtml } from './utils/svg'; import { escapeHTML } from './utils/common'; - +import { token } from '../../../theme/token'; /** * The tooltip handler class. */ @@ -82,6 +82,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { parentElement.appendChild(this._container); } const tooltipElement = document.createElement('div'); + const globalTheme = this._chartOption?.getTheme() ?? {}; setStyleToDom(tooltipElement, { left: '0', @@ -90,7 +91,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { padding: '12px', position: 'absolute', zIndex: DEFAULT_TOOLTIP_Z_INDEX, - fontFamily: 'sans-serif', + fontFamily: (globalTheme?.fontFamily ?? token.fontFamily) as string, fontSize: '11px', borderRadius: '3px', borderStyle: 'solid', @@ -170,7 +171,9 @@ export class DomTooltipHandler extends BaseTooltipHandler { } protected _initStyle() { - this._domStyle = getDomStyle(this._component.getSpec(), this._chartOption?.getTheme() ?? {}); + const tooltipSpec = this._component.getSpec() as ITooltipSpec; + + this._domStyle = getDomStyle(tooltipSpec); } // protected _updateDomString(actualTooltip?: ITooltipActual) { diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts index 3814d1708b..00ba8dcbd6 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts @@ -1,7 +1,5 @@ import { isArray, isValid, isValidNumber, lowerCamelCaseToMiddle, normalizePadding } from '@visactor/vutils'; import type { ITooltipSpec, ITooltipTextTheme, ITooltipTheme } from '../../../../component/tooltip'; -import type { ITheme } from '../../../../theme'; -import { token } from '../../../../theme/token'; const DEFAULT_SHAPE_SPACING = 8; const DEFAULT_KEY_SPACING = 26; @@ -32,7 +30,7 @@ export const getTextStyle = (style: ITooltipTextTheme = {}) => { return textStyle; }; -export const getDomStyle = (spec: ITooltipSpec = {}, globalTheme: ITheme) => { +export const getDomStyle = (spec: ITooltipSpec = {}) => { const { style = {}, enterable, transitionDuration } = spec; const { panel = {}, @@ -57,12 +55,11 @@ export const getDomStyle = (spec: ITooltipSpec = {}, globalTheme: ITheme) => { panelStyle.transitionProperty = transitionDuration ? 'transform' : 'initial'; panelStyle.transitionTimingFunction = transitionDuration ? 'ease-out' : 'initial'; } - panelStyle.fontFamily = (globalTheme?.fontFamily ?? token.fontFamily) as string; if (isValidNumber(commonSpaceRow)) { rowStyle.marginBottom = `${commonSpaceRow}px`; } - if (isValidNumber(maxContentHeight)) { + if (isValid(maxContentHeight)) { contentStyle.maxHeight = `${maxContentHeight}px`; contentStyle.overflowY = 'auto'; // todo 让内容宽度往外阔一点,给滚动条留出位置