From c4efc1fb1dd9bfda804804ba9eaff14a8846ff51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Tue, 28 Mar 2023 22:47:27 +0800
Subject: [PATCH 01/18] feat: allow customed tooltip container

---
 src/component/tooltip/TooltipHTMLContent.ts | 29 +++++++++++++--------
 src/component/tooltip/TooltipView.ts        |  3 ++-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index b326acd091..faa9255150 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -212,14 +212,14 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
 }
 
 // If not able to make, do not modify the input `out`.
-function makeStyleCoord(out: number[], zr: ZRenderType, appendToBody: boolean, zrX: number, zrY: number) {
+function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLElement | null, zrX: number, zrY: number) {
     const zrPainter = zr && zr.painter;
 
-    if (appendToBody) {
+    if (customContainer) {
         const zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
         if (zrViewportRoot) {
             // Some APPs might use scale on body, so we support CSS transform here.
-            transformLocalCoord(out, zrViewportRoot, document.body, zrX, zrY);
+            transformLocalCoord(out, zrViewportRoot, customContainer, zrX, zrY);
         }
     }
     else {
@@ -257,7 +257,7 @@ class TooltipHTMLContent {
     private _show: boolean = false;
 
     private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];
-    private _appendToBody: boolean;
+    private _customContainer: HTMLElement | null;
 
     private _enterable = true;
     private _zr: ZRenderType;
@@ -291,14 +291,21 @@ class TooltipHTMLContent {
         (el as any).domBelongToZr = true;
         this.el = el;
         const zr = this._zr = api.getZr();
-        const appendToBody = this._appendToBody = opt && opt.appendToBody;
 
-        makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);
-
-        if (appendToBody) {
-            document.body.appendChild(el);
+        let customContainer: HTMLElement | null
+        if (opt && opt.appendToBody) {
+            customContainer = this._customContainer = document.body
+        } else if (opt && opt.getAppendElement) {
+            customContainer = this._customContainer = opt.getAppendElement(container) || null;
+        } else {
+            customContainer = this._customContainer = null
         }
-        else {
+
+        makeStyleCoord(this._styleCoord, zr, customContainer, api.getWidth() / 2, api.getHeight() / 2);
+
+        if (customContainer) {
+            customContainer.appendChild(el);
+        } else {
             container.appendChild(el);
         }
 
@@ -456,7 +463,7 @@ class TooltipHTMLContent {
 
     moveTo(zrX: number, zrY: number) {
         const styleCoord = this._styleCoord;
-        makeStyleCoord(styleCoord, this._zr, this._appendToBody, zrX, zrY);
+        makeStyleCoord(styleCoord, this._zr, this._customContainer, zrX, zrY);
 
         if (styleCoord[0] != null && styleCoord[1] != null) {
             const style = this.el.style;
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 82a222cb1d..90fe1c5adb 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -172,7 +172,8 @@ class TooltipView extends ComponentView {
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
             : new TooltipHTMLContent(api.getDom(), api, {
-                appendToBody: tooltipModel.get('appendToBody', true)
+		 getAppendElement: tooltipModel.get('getAppendElement', true),
+		 appendToBody: tooltipModel.get('appendToBody', true)
             });
     }
 

From e188b2008d15afee68908595af83cb7dee525b46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Wed, 29 Mar 2023 15:51:21 +0800
Subject: [PATCH 02/18] refactor: rename variables: getAppendElement =>
 teleport & customContainer => container

---
 src/component/tooltip/TooltipHTMLContent.ts | 28 ++++++++++-----------
 src/component/tooltip/TooltipView.ts        |  2 +-
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index faa9255150..0c5cba5bc8 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -252,12 +252,12 @@ class TooltipHTMLContent {
 
     el: HTMLDivElement;
 
-    private _container: HTMLElement;
+    private _api: ExtensionAPI;
+    private _container: HTMLElement | null = null;
 
     private _show: boolean = false;
 
     private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];
-    private _customContainer: HTMLElement | null;
 
     private _enterable = true;
     private _zr: ZRenderType;
@@ -278,7 +278,6 @@ class TooltipHTMLContent {
     private _longHideTimeout: number;
 
     constructor(
-        container: HTMLElement,
         api: ExtensionAPI,
         opt: TooltipContentOption
     ) {
@@ -292,23 +291,22 @@ class TooltipHTMLContent {
         this.el = el;
         const zr = this._zr = api.getZr();
 
-        let customContainer: HTMLElement | null
+        let container: HTMLElement | null = null;
         if (opt && opt.appendToBody) {
-            customContainer = this._customContainer = document.body
-        } else if (opt && opt.getAppendElement) {
-            customContainer = this._customContainer = opt.getAppendElement(container) || null;
-        } else {
-            customContainer = this._customContainer = null
+            container = this._container = document.body
+        } else if (opt && opt.teleport) {
+            container = this._customContainer = opt.teleport(api.getDom()) || null;
         }
 
-        makeStyleCoord(this._styleCoord, zr, customContainer, api.getWidth() / 2, api.getHeight() / 2);
+        makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
 
-        if (customContainer) {
-            customContainer.appendChild(el);
-        } else {
+        if (container) {
             container.appendChild(el);
+        } else {
+            api.getDom().appendChild(el);
         }
 
+        this._api = api
         this._container = container;
 
         // FIXME
@@ -357,7 +355,7 @@ class TooltipHTMLContent {
     update(tooltipModel: Model<TooltipOption>) {
         // FIXME
         // Move this logic to ec main?
-        const container = this._container;
+        const container = this._api.getDom();
         const position = getComputedStyle(container, 'position');
         const domStyle = container.style;
         if (domStyle.position !== 'absolute' && position !== 'absolute') {
@@ -463,7 +461,7 @@ class TooltipHTMLContent {
 
     moveTo(zrX: number, zrY: number) {
         const styleCoord = this._styleCoord;
-        makeStyleCoord(styleCoord, this._zr, this._customContainer, zrX, zrY);
+        makeStyleCoord(styleCoord, this._zr, this._container, zrX, zrY);
 
         if (styleCoord[0] != null && styleCoord[1] != null) {
             const style = this.el.style;
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 90fe1c5adb..89dde041c2 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -171,7 +171,7 @@ class TooltipView extends ComponentView {
 
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
-            : new TooltipHTMLContent(api.getDom(), api, {
+            : new TooltipHTMLContent(api, {
 		 getAppendElement: tooltipModel.get('getAppendElement', true),
 		 appendToBody: tooltipModel.get('appendToBody', true)
             });

From 92bcf210b1159075cc5f758637f56b81f29f176e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Fri, 31 Mar 2023 18:02:30 +0800
Subject: [PATCH 03/18] feat: support 3 options to locale the tooltip container

---
 src/component/tooltip/TooltipHTMLContent.ts | 22 +++++++++++++--------
 src/component/tooltip/TooltipView.ts        |  3 +--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 0c5cba5bc8..a4a2288587 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -241,11 +241,13 @@ function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLEle
 
 interface TooltipContentOption {
     /**
-     * `false`: the DOM element will be inside the container. Default value.
-     * `true`: the DOM element will be appended to HTML body, which avoid
-     *  some overflow clip but intrude outside of the container.
+     * Choose a DOM element which the tooltip element will be located in order to 
+     * avoid some overflow clip but intrude outside of the container.
+     * 
+     * this config can be either a DomElement, a function to choose a element
+     * or a selector string used by query delector to local a element
      */
-    appendToBody: boolean
+    appendTo: Function | HTMLElement | string
 }
 
 class TooltipHTMLContent {
@@ -292,10 +294,14 @@ class TooltipHTMLContent {
         const zr = this._zr = api.getZr();
 
         let container: HTMLElement | null = null;
-        if (opt && opt.appendToBody) {
-            container = this._container = document.body
-        } else if (opt && opt.teleport) {
-            container = this._customContainer = opt.teleport(api.getDom()) || null;
+        if (opt && opt.appendTo) {
+	    if(typeof opt.appendTo === 'string') {
+	    	container = document.querySelector(opt.appendTo)
+	    } else if (typeof opt.appendTo === 'function') {
+	    	container = opt.appendTo(api.getDom())
+	    } else if (opt.appendTo instanceof HTMLElement) {
+                container = opt.appendTo
+	    }
         }
 
         makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 89dde041c2..826fad23d1 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -172,8 +172,7 @@ class TooltipView extends ComponentView {
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
             : new TooltipHTMLContent(api, {
-		 getAppendElement: tooltipModel.get('getAppendElement', true),
-		 appendToBody: tooltipModel.get('appendToBody', true)
+		 appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('getAppendElement', true),
             });
     }
 

From 723e13b37e3a539ee561e9ff5c1947fbcc5ceebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Fri, 31 Mar 2023 18:04:36 +0800
Subject: [PATCH 04/18] refactor: rename customContainer to container

---
 src/component/tooltip/TooltipHTMLContent.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index a4a2288587..491266d11b 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -212,14 +212,14 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
 }
 
 // If not able to make, do not modify the input `out`.
-function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLElement | null, zrX: number, zrY: number) {
+function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement | null, zrX: number, zrY: number) {
     const zrPainter = zr && zr.painter;
 
-    if (customContainer) {
+    if (container) {
         const zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
         if (zrViewportRoot) {
             // Some APPs might use scale on body, so we support CSS transform here.
-            transformLocalCoord(out, zrViewportRoot, customContainer, zrX, zrY);
+            transformLocalCoord(out, zrViewportRoot, container, zrX, zrY);
         }
     }
     else {

From a1b9d0f6f20708e691d3e2e44920f2fc42c4d6eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Fri, 31 Mar 2023 19:31:37 +0800
Subject: [PATCH 05/18] fix: add model params name

---
 src/component/tooltip/TooltipModel.ts | 7 +++++++
 src/component/tooltip/TooltipView.ts  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 413b52fb49..79af951dfa 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -66,6 +66,13 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      */
     appendToBody?: boolean
 
+    /**
+     * If append popup dom to some other dom element
+     * Only available when renderMode is html
+     */
+    appendTo?: Function | string | HTMLElement
+
+
     /**
      * specified class name of tooltip dom
      * Only available when renderMode is html
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 826fad23d1..485a912bc5 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -172,7 +172,7 @@ class TooltipView extends ComponentView {
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
             : new TooltipHTMLContent(api, {
-		 appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('getAppendElement', true),
+		 appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('appendTo', true),
             });
     }
 

From 19f68c54ca7ffd3d3e8600cda30aa69dbbace577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Wed, 29 Mar 2023 15:51:21 +0800
Subject: [PATCH 06/18] refactor: rename variables: getAppendElement =>
 teleport & customContainer => container

---
 src/component/tooltip/TooltipHTMLContent.ts | 28 ++++++++-------------
 src/component/tooltip/TooltipView.ts        |  3 ++-
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 491266d11b..0c5cba5bc8 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -212,14 +212,14 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
 }
 
 // If not able to make, do not modify the input `out`.
-function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement | null, zrX: number, zrY: number) {
+function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLElement | null, zrX: number, zrY: number) {
     const zrPainter = zr && zr.painter;
 
-    if (container) {
+    if (customContainer) {
         const zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
         if (zrViewportRoot) {
             // Some APPs might use scale on body, so we support CSS transform here.
-            transformLocalCoord(out, zrViewportRoot, container, zrX, zrY);
+            transformLocalCoord(out, zrViewportRoot, customContainer, zrX, zrY);
         }
     }
     else {
@@ -241,13 +241,11 @@ function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement |
 
 interface TooltipContentOption {
     /**
-     * Choose a DOM element which the tooltip element will be located in order to 
-     * avoid some overflow clip but intrude outside of the container.
-     * 
-     * this config can be either a DomElement, a function to choose a element
-     * or a selector string used by query delector to local a element
+     * `false`: the DOM element will be inside the container. Default value.
+     * `true`: the DOM element will be appended to HTML body, which avoid
+     *  some overflow clip but intrude outside of the container.
      */
-    appendTo: Function | HTMLElement | string
+    appendToBody: boolean
 }
 
 class TooltipHTMLContent {
@@ -294,14 +292,10 @@ class TooltipHTMLContent {
         const zr = this._zr = api.getZr();
 
         let container: HTMLElement | null = null;
-        if (opt && opt.appendTo) {
-	    if(typeof opt.appendTo === 'string') {
-	    	container = document.querySelector(opt.appendTo)
-	    } else if (typeof opt.appendTo === 'function') {
-	    	container = opt.appendTo(api.getDom())
-	    } else if (opt.appendTo instanceof HTMLElement) {
-                container = opt.appendTo
-	    }
+        if (opt && opt.appendToBody) {
+            container = this._container = document.body
+        } else if (opt && opt.teleport) {
+            container = this._customContainer = opt.teleport(api.getDom()) || null;
         }
 
         makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 485a912bc5..89dde041c2 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -172,7 +172,8 @@ class TooltipView extends ComponentView {
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
             : new TooltipHTMLContent(api, {
-		 appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('appendTo', true),
+		 getAppendElement: tooltipModel.get('getAppendElement', true),
+		 appendToBody: tooltipModel.get('appendToBody', true)
             });
     }
 

From 77e48e42cf6aa6d764e4283b5e4a91bc0f3b2e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Mon, 3 Apr 2023 12:39:23 +0800
Subject: [PATCH 07/18] refactor: update based on cr

---
 src/component/tooltip/TooltipHTMLContent.ts | 42 ++++++++++-----------
 src/component/tooltip/TooltipModel.ts       |  6 +--
 src/component/tooltip/TooltipView.ts        |  3 +-
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 0c5cba5bc8..e85ba513fb 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import { isString, indexOf, each, bind, isArray, isDom } from 'zrender/src/core/util';
+import { isString, indexOf, each, bind, isFunction, isArray, isDom } from 'zrender/src/core/util';
 import { normalizeEvent } from 'zrender/src/core/event';
 import { transformLocalCoord } from 'zrender/src/core/dom';
 import env from 'zrender/src/core/env';
@@ -212,14 +212,14 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
 }
 
 // If not able to make, do not modify the input `out`.
-function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLElement | null, zrX: number, zrY: number) {
+function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement | null, zrX: number, zrY: number) {
     const zrPainter = zr && zr.painter;
 
-    if (customContainer) {
+    if (container) {
         const zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
         if (zrViewportRoot) {
             // Some APPs might use scale on body, so we support CSS transform here.
-            transformLocalCoord(out, zrViewportRoot, customContainer, zrX, zrY);
+            transformLocalCoord(out, zrViewportRoot, container, zrX, zrY);
         }
     }
     else {
@@ -241,11 +241,13 @@ function makeStyleCoord(out: number[], zr: ZRenderType, customContainer: HTMLEle
 
 interface TooltipContentOption {
     /**
-     * `false`: the DOM element will be inside the container. Default value.
-     * `true`: the DOM element will be appended to HTML body, which avoid
-     *  some overflow clip but intrude outside of the container.
+     * Choose a DOM element which the tooltip element will be located in order to
+     * avoid some overflow clip but intrude outside of the container.
+     *
+     * this config can be either a DomElement, a function to choose a element
+     * or a selector string used by query delector to local a element
      */
-    appendToBody: boolean
+    appendTo: ((el?: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
 }
 
 class TooltipHTMLContent {
@@ -253,7 +255,7 @@ class TooltipHTMLContent {
     el: HTMLDivElement;
 
     private _api: ExtensionAPI;
-    private _container: HTMLElement | null = null;
+    private _container: HTMLElement;
 
     private _show: boolean = false;
 
@@ -291,22 +293,18 @@ class TooltipHTMLContent {
         this.el = el;
         const zr = this._zr = api.getZr();
 
-        let container: HTMLElement | null = null;
-        if (opt && opt.appendToBody) {
-            container = this._container = document.body
-        } else if (opt && opt.teleport) {
-            container = this._customContainer = opt.teleport(api.getDom()) || null;
-        }
+        const appendTo = opt.appendTo;
+        const container: HTMLElement = (
+            isString(appendTo)
+                ? document.querySelector(appendTo)
+                : isDom(appendTo)
+                    ? appendTo
+                    : isFunction(appendTo) && appendTo()
+        ) || api.getDom();
 
         makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
 
-        if (container) {
-            container.appendChild(el);
-        } else {
-            api.getDom().appendChild(el);
-        }
-
-        this._api = api
+        container.appendChild(el);
         this._container = container;
 
         // FIXME
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 79af951dfa..41dd24c76a 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -61,8 +61,8 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
     renderMode?: 'auto' | TooltipRenderMode   // TODO richText renamed canvas?
 
     /**
-     * If append popup dom to document.body
-     * Only available when renderMode is html
+     * @deprecated
+     * use appendTo: 'body' instead
      */
     appendToBody?: boolean
 
@@ -70,7 +70,7 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      * If append popup dom to some other dom element
      * Only available when renderMode is html
      */
-    appendTo?: Function | string | HTMLElement
+    appendTo?: ((el?: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
 
 
     /**
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 89dde041c2..5600dc2925 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -172,8 +172,7 @@ class TooltipView extends ComponentView {
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
             : new TooltipHTMLContent(api, {
-		 getAppendElement: tooltipModel.get('getAppendElement', true),
-		 appendToBody: tooltipModel.get('appendToBody', true)
+                appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('appendTo', true)
             });
     }
 

From d038881d9906ef1b58af37545228adc39f060d60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Mon, 3 Apr 2023 13:24:30 +0800
Subject: [PATCH 08/18] fix: add missing variable

---
 src/component/tooltip/TooltipHTMLContent.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index e85ba513fb..d5038ee695 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -299,12 +299,14 @@ class TooltipHTMLContent {
                 ? document.querySelector(appendTo)
                 : isDom(appendTo)
                     ? appendTo
-                    : isFunction(appendTo) && appendTo()
-        ) || api.getDom();
+                    : isFunction(appendTo) && appendTo(api.getDom())
+        );
 
         makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
 
         container.appendChild(el);
+
+        this._api = api;
         this._container = container;
 
         // FIXME

From eb8793f501feb6b828e7d9dfffb25a6299027ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Mon, 3 Apr 2023 14:51:36 +0800
Subject: [PATCH 09/18] test: add test case for appendTo

---
 test/tooltip-appendTo.html | 550 +++++++++++++++++++++++++++++++++++++
 1 file changed, 550 insertions(+)
 create mode 100644 test/tooltip-appendTo.html

diff --git a/test/tooltip-appendTo.html b/test/tooltip-appendTo.html
new file mode 100644
index 0000000000..429d798820
--- /dev/null
+++ b/test/tooltip-appendTo.html
@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            html {
+                perspective: 271px;
+            }
+            h1 {
+                line-height: 60px;
+                height: 60px;
+                background: #ddd;
+                text-align: center;
+                font-weight: bold;
+                font-size: 14px;
+            }
+            #position {
+                transform: scale3d(0.7, 0.6, 1) rotateY(-8deg) rotateZ(-3deg);
+                transform-style: preserve-3d;
+                position: relative;
+            }
+
+            #config {
+                width: 90%;
+                height: 600px;
+                overflow: auto;
+                position: relative;
+            }
+
+            #config > .mark {
+                background: lightblue !important;
+            }
+
+            .test-chart-block {
+                overflow: hidden !important;
+            }
+        </style>
+
+        <h1>correct position</h1>
+        <div id="position">
+            <div id="main0"></div>
+            <div id="main1"></div>
+            <div id="main2"></div>
+            <div id="main3"></div>
+        </div>
+
+        <h1>3 way to config</h1>
+        <div id="config">
+            <div id="main4"></div>
+            <div id="main5"></div>
+            <div id="main6"></div>
+        </div>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: '#position',
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                        '12_aaaaaaaaaaaaaa'
+                    ].join('<br>'),
+                    extraCssText: 'transform: scaleZ(1)'
+                },
+                dataZoom: [{
+                    type: 'slider'
+                }, {
+                    type: 'inside'
+                }],
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 32], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 42], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 52], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 62], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 72], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 82], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Body is CSS transfromed, tooltip should be correctly positioned',
+                    'and not be overflow clipped.'
+                ],
+                option: option,
+                height: 300
+            });
+        });
+        </script>
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: '#position',
+                    position: [120, 20],
+                    formatter: [
+                        '1_aa..................................................................a',
+                        '2_aa..................................................................a',
+                        '3_aa..................................................................a',
+                        '4_aa..................................................................a',
+                        '5_aa..................................................................a',
+                        '6_aa..................................................................a',
+                        '7_aa..................................................................a',
+                        '8_aa..................................................................a',
+                        '9_aa..................................................................a',
+                        '10_a..................................................................aa',
+                        '11_a..................................................................aa',
+                        '12_a..................................................................aa',
+                        '13_a..................................................................aa',
+                        '14_a..................................................................aa',
+                        '15_a..................................................................aa',
+                        '16_a..................................................................aa',
+                        '17_a..................................................................aa',
+                        '18_a..................................................................aa',
+                        '19_a..................................................................aa'
+                    ].join('<br>'),
+                    extraCssText: 'transform: scaleZ(1); background: rgba(0, 0, 0, 0.2);'
+                },
+                dataZoom: [{
+                    type: 'slider'
+                }, {
+                    type: 'inside'
+                }],
+                series: [{
+                    type: 'line',
+                    symbolSize: 50,
+                    symbol: 'circle',
+                    itemStyle: {
+                        opacity: 0.3
+                    },
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 50,
+                    symbol: 'circle',
+                    itemStyle: {
+                        opacity: 0.3
+                    },
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'When mouseover tooltip the **red** stoke should keep being generated,',
+                    'and the tooltip is able to show and hide.'
+                ],
+                option: option,
+                height: 300
+            });
+            if (chart) {
+                var zr = chart.getZr();
+                zr.on('mousemove', function (event) {
+                    var circle = new echarts.graphic.Circle({
+                        shape: {
+                            cx: event.offsetX,
+                            cy: event.offsetY,
+                            r: 3
+                        },
+                        style: {
+                            fill: 'red'
+                        },
+                        z: -100
+                    });
+                    zr.add(circle);
+                });
+                zr.on('globalout', function (event) {
+                    console.log('globalout');
+                });
+            }
+        });
+        </script>
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: '#position',
+                    position: 'bottom',
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                        '12_aaaaaaaaaaaaaa'
+                    ].join('<br>'),
+                    extraCssText: 'transform: scaleZ(1)'
+                },
+                dataZoom: [{
+                    type: 'slider'
+                }, {
+                    type: 'inside'
+                }],
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Body is CSS transfromed, tooltip should be correctly positioned',
+                    'and not be overflow clipped.'
+                ],
+                option: option,
+                height: 300,
+                buttons: [{
+                    text: 'showTip, x: number, y: number',
+                    onclick: function () {
+                        var coord = chart.convertToPixel(
+                            {seriesIndex: 0}, [11, 22]
+                        );
+                        chart.dispatchAction({
+                            type: 'showTip',
+                            x: coord[0],
+                            y: coord[1]
+                        });
+                    }
+                }]
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                title: {
+                    text: 'gloubalout not triggered yet'
+                },
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: '#position',
+                    enterable: true,
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                        '12_aaaaaaaaaaaaaa'
+                    ].join('<br>'),
+                    extraCssText: 'transform: scaleZ(1)'
+                },
+                dataZoom: [{
+                    type: 'slider'
+                }, {
+                    type: 'inside'
+                }],
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: [
+                    'tooltip.enterable: true, enter the tooltip,',
+                    'globalout should not be triggered'
+                ],
+                option: option,
+                height: 200
+            });
+            if (chart) {
+                var zr = chart.getZr();
+                zr.on('globalout', function () {
+                    chart.setOption({
+                        title: {
+                            text: 'gloubalout triggered at\n' + (+new Date())
+                        }
+                    });
+                });
+            }
+        });
+        </script>
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: '#config',
+                    className: 'mark',
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                        `<span class='mark'>use_string</span>`
+                    ].join('<br>'),
+                },
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 32], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 82], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main4', {
+                title: [
+                    'use string'
+                ],
+                option: option,
+                height: 300
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: () => document.querySelector('#config'),
+                    className: 'mark',
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                        `<span class='mark'>use_function</span>`
+                    ].join('<br>'),
+                },
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 32], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 82], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main5', {
+                title: [
+                    'use function'
+                ],
+                option: option,
+                height: 300
+            });
+        });
+        </script>
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+            option = {
+                xAxis: {},
+                yAxis: {},
+                tooltip: {
+                    appendTo: () => document.querySelector('#config'),
+                    className: 'mark',
+                    formatter: [
+                        '1_aaaaaaaaaaaaaa',
+                        '2_aaaaaaaaaaaaaa',
+                        '3_aaaaaaaaaaaaaa',
+                        '4_aaaaaaaaaaaaaa',
+                        '5_aaaaaaaaaaaaaa',
+                        '6_aaaaaaaaaaaaaa',
+                        '7_aaaaaaaaaaaaaa',
+                        '8_aaaaaaaaaaaaaa',
+                        '9_aaaaaaaaaaaaaa',
+                        '10_aaaaaaaaaaaaaa',
+                        '11_aaaaaaaaaaaaaa',
+                    ].join('<br>'),
+                },
+                series: [{
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 22], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 32], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 82], [33, 44]]
+                }, {
+                    type: 'line',
+                    symbolSize: 30,
+                    data: [[11, 92], [33, 44]]
+                }]
+            };
+    
+            var chart = testHelper.create(echarts, 'main6', {
+                title: [
+                    'use element',
+                ],
+                option: option,
+                height: 300
+            });
+        });
+        </script>
+
+    </body>
+</html>
+

From efb00a7c4800b9b174d3831e3bfe456888057816 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Mon, 3 Apr 2023 14:53:10 +0800
Subject: [PATCH 10/18] fix: add fallback

---
 src/component/tooltip/TooltipHTMLContent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index d5038ee695..759aac9c59 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -304,7 +304,7 @@ class TooltipHTMLContent {
 
         makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
 
-        container.appendChild(el);
+        (container || api.getDom()).appendChild(el);
 
         this._api = api;
         this._container = container;

From aeff1503a480a4e0f965748ba945cd2de4b50e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Mon, 3 Apr 2023 18:44:50 +0800
Subject: [PATCH 11/18] fix: only update styled to position:relative when there
 is no custom container

---
 src/component/tooltip/TooltipHTMLContent.ts | 24 ++++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 759aac9c59..f03876d95d 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -212,7 +212,13 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
 }
 
 // If not able to make, do not modify the input `out`.
-function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement | null, zrX: number, zrY: number) {
+function makeStyleCoord(
+    out: number[],
+    zr: ZRenderType,
+    container: HTMLElement | null | undefined,
+    zrX: number,
+    zrY: number
+) {
     const zrPainter = zr && zr.painter;
 
     if (container) {
@@ -255,7 +261,7 @@ class TooltipHTMLContent {
     el: HTMLDivElement;
 
     private _api: ExtensionAPI;
-    private _container: HTMLElement;
+    private _container: HTMLElement | undefined | null;
 
     private _show: boolean = false;
 
@@ -294,7 +300,7 @@ class TooltipHTMLContent {
         const zr = this._zr = api.getZr();
 
         const appendTo = opt.appendTo;
-        const container: HTMLElement = (
+        const container: HTMLElement | null | undefined = (
             isString(appendTo)
                 ? document.querySelector(appendTo)
                 : isDom(appendTo)
@@ -355,11 +361,13 @@ class TooltipHTMLContent {
     update(tooltipModel: Model<TooltipOption>) {
         // FIXME
         // Move this logic to ec main?
-        const container = this._api.getDom();
-        const position = getComputedStyle(container, 'position');
-        const domStyle = container.style;
-        if (domStyle.position !== 'absolute' && position !== 'absolute') {
-            domStyle.position = 'relative';
+        if (!this._container) {
+            const container = this._api.getDom();
+            const position = getComputedStyle(container, 'position');
+            const domStyle = container.style;
+            if (domStyle.position !== 'absolute' && position !== 'absolute') {
+                domStyle.position = 'relative';
+            }
         }
 
         // move tooltip if chart resized

From 6ecd62b5eb91bb94ef46cc8a07610d8abfccd130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Thu, 6 Apr 2023 19:59:12 +0800
Subject: [PATCH 12/18] refactor: rename element name

---
 src/component/tooltip/TooltipHTMLContent.ts | 2 +-
 src/component/tooltip/TooltipModel.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index f03876d95d..9836d9d723 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -253,7 +253,7 @@ interface TooltipContentOption {
      * this config can be either a DomElement, a function to choose a element
      * or a selector string used by query delector to local a element
      */
-    appendTo: ((el?: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
+    appendTo: ((chartContainer?: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
 }
 
 class TooltipHTMLContent {
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 41dd24c76a..36f3daef62 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -70,7 +70,7 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      * If append popup dom to some other dom element
      * Only available when renderMode is html
      */
-    appendTo?: ((el?: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
+    appendTo?: ((chartContainer?: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
 
 
     /**

From 368d0a8f9ae53880fe563c121b380cba89d0da74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Tue, 8 Aug 2023 22:31:10 +0800
Subject: [PATCH 13/18] fix: clearing the _container & el in the dispose
 function

---
 src/component/tooltip/TooltipHTMLContent.ts | 3 +++
 src/component/tooltip/TooltipModel.ts       | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 9836d9d723..aafdb2b0ab 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -524,6 +524,9 @@ class TooltipHTMLContent {
 
     dispose() {
         this.el.parentNode.removeChild(this.el);
+        this.el = null;
+        this._container = null;
+        this._api = null;
     }
 
 }
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 36f3daef62..b761240672 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -70,7 +70,7 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      * If append popup dom to some other dom element
      * Only available when renderMode is html
      */
-    appendTo?: ((chartContainer?: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
+    appendTo?: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
 
 
     /**

From 7df2718236e5f6f5a1f75f362ab86d990d76dbb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=B1=E7=BF=B0?= <weihan@xiaomi.com>
Date: Wed, 9 Aug 2023 22:04:09 +0800
Subject: [PATCH 14/18] fix: chartContainer always exists

---
 src/component/tooltip/TooltipHTMLContent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index aafdb2b0ab..d0902c8740 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -253,7 +253,7 @@ interface TooltipContentOption {
      * this config can be either a DomElement, a function to choose a element
      * or a selector string used by query delector to local a element
      */
-    appendTo: ((chartContainer?: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
+    appendTo: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
 }
 
 class TooltipHTMLContent {

From 757877e889d059a71bc6b1775d3dabfadfd9db4c Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sat, 2 Sep 2023 15:55:45 +0800
Subject: [PATCH 15/18] test: tweak test case

---
 test/tooltip-appendTo.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/tooltip-appendTo.html b/test/tooltip-appendTo.html
index 429d798820..644697e17e 100644
--- a/test/tooltip-appendTo.html
+++ b/test/tooltip-appendTo.html
@@ -500,7 +500,7 @@ <h1>3 way to config</h1>
                 xAxis: {},
                 yAxis: {},
                 tooltip: {
-                    appendTo: () => document.querySelector('#config'),
+                    appendTo: document.querySelector('#config'),
                     className: 'mark',
                     formatter: [
                         '1_aaaaaaaaaaaaaa',
@@ -534,7 +534,7 @@ <h1>3 way to config</h1>
                     data: [[11, 92], [33, 44]]
                 }]
             };
-    
+
             var chart = testHelper.create(echarts, 'main6', {
                 title: [
                     'use element',

From de730f9c66d3a38b8b1555a55b8c71e8b44c8d5a Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sat, 2 Sep 2023 16:17:19 +0800
Subject: [PATCH 16/18] chore: tweak comment

---
 src/component/tooltip/TooltipHTMLContent.ts | 11 +++--------
 src/component/tooltip/TooltipModel.ts       |  5 ++---
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index d0902c8740..b116f1bb6b 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -247,11 +247,8 @@ function makeStyleCoord(
 
 interface TooltipContentOption {
     /**
-     * Choose a DOM element which the tooltip element will be located in order to
-     * avoid some overflow clip but intrude outside of the container.
-     *
-     * this config can be either a DomElement, a function to choose a element
-     * or a selector string used by query delector to local a element
+     * Specify target container of the tooltip element.
+     * Can either be an HTMLElement, CSS selector string, or a function that returns an HTMLElement.
      */
     appendTo: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
 }
@@ -524,9 +521,7 @@ class TooltipHTMLContent {
 
     dispose() {
         this.el.parentNode.removeChild(this.el);
-        this.el = null;
-        this._container = null;
-        this._api = null;
+        this.el = this._container = null;
     }
 
 }
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index b761240672..351cc0549b 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -67,14 +67,13 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
     appendToBody?: boolean
 
     /**
-     * If append popup dom to some other dom element
+     * If append the tooltip element to another DOM element.
      * Only available when renderMode is html
      */
     appendTo?: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
 
-
     /**
-     * specified class name of tooltip dom
+     * Specify the class name of tooltip element
      * Only available when renderMode is html
      */
     className?: string

From fd4ef78e2a3974cbb6342c8807993912929a2261 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sat, 2 Sep 2023 16:29:36 +0800
Subject: [PATCH 17/18] fix(tooltip): fix potential exception when `appendTo`
 is an empty string

---
 src/component/tooltip/TooltipHTMLContent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index b116f1bb6b..a256ea7e0f 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -299,7 +299,7 @@ class TooltipHTMLContent {
         const appendTo = opt.appendTo;
         const container: HTMLElement | null | undefined = (
             isString(appendTo)
-                ? document.querySelector(appendTo)
+                ? appendTo && document.querySelector(appendTo)
                 : isDom(appendTo)
                     ? appendTo
                     : isFunction(appendTo) && appendTo(api.getDom())

From 2864cd1745a2970fe51f63fc3dc480826d12583c Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sat, 2 Sep 2023 16:47:41 +0800
Subject: [PATCH 18/18] fix(tooltip): fix potential exception when `appendTo`
 is an empty string or null

---
 src/component/tooltip/TooltipHTMLContent.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index a256ea7e0f..da1960835e 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -297,9 +297,9 @@ class TooltipHTMLContent {
         const zr = this._zr = api.getZr();
 
         const appendTo = opt.appendTo;
-        const container: HTMLElement | null | undefined = (
+        const container: HTMLElement | null | undefined = appendTo && (
             isString(appendTo)
-                ? appendTo && document.querySelector(appendTo)
+                ? document.querySelector(appendTo)
                 : isDom(appendTo)
                     ? appendTo
                     : isFunction(appendTo) && appendTo(api.getDom())