refactor: optimize fontFamily of tooltip

Author: xile611

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) {

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 让内容宽度往外阔一点，给滚动条留出位置