diff --git a/packages/vchart/__tests__/unit/component/tooltip/dom-tooltip-handler.test.ts b/packages/vchart/__tests__/unit/component/tooltip/dom-tooltip-handler.test.ts index 2bf51c1667..b701531d40 100644 --- a/packages/vchart/__tests__/unit/component/tooltip/dom-tooltip-handler.test.ts +++ b/packages/vchart/__tests__/unit/component/tooltip/dom-tooltip-handler.test.ts @@ -1,5 +1,8 @@ import { DomTooltipHandler } from '../../../../src/plugin/components/tooltip-handler/dom-tooltip-handler'; -import { TOOLTIP_CONTAINER_EL_CLASS_NAME } from '../../../../src/plugin/components/tooltip-handler/constants'; +import { + TOOLTIP_CONTAINER_EL_CLASS_NAME, + TOOLTIP_TITLE_CLASS_NAME +} from '../../../../src/plugin/components/tooltip-handler/constants'; import { createDiv, removeDom } from '../../../util/dom'; const createTooltipSpec = (spec: any) => ({ @@ -61,4 +64,16 @@ describe('DomTooltipHandler', () => { expect(parentElement.querySelector(`.${TOOLTIP_CONTAINER_EL_CLASS_NAME}`)).toBe(handler.getTooltipContainer()); }); + + it('renders title as text', () => { + const handler = createHandler({}, container) as any; + const title = ''; + + handler.initRootDom(); + handler._updateDomStringByCol({ title: { value: title }, content: [] }); + + const titleDom = container.querySelector(`.${TOOLTIP_TITLE_CLASS_NAME}`); + expect(titleDom.textContent).toBe(title); + expect(titleDom.querySelector('img')).toBeNull(); + }); }); 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 98b212a39e..fae2353b8f 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 @@ -252,7 +252,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { ...(hasContent ? rowStyle : { marginBottom: '0px' }), marginTop: '0px' }); - (titleDom.firstChild as HTMLElement).innerHTML = `${title.value ?? ''}`; + (titleDom.firstChild as HTMLElement).textContent = `${title.value ?? ''}`; } else if (titleDom && title.visible === false) { titleDom.parentNode.removeChild(titleDom); }