diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 491266d11b1..60de68b42b6 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';
@@ -241,9 +241,9 @@ function makeStyleCoord(out: number[], zr: ZRenderType, container: HTMLElement |
 
 interface TooltipContentOption {
     /**
-     * Choose a DOM element which the tooltip element will be located in order to 
+     * 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
      */
@@ -254,7 +254,6 @@ class TooltipHTMLContent {
 
     el: HTMLDivElement;
 
-    private _api: ExtensionAPI;
     private _container: HTMLElement | null = null;
 
     private _show: boolean = false;
@@ -293,26 +292,19 @@ class TooltipHTMLContent {
         this.el = el;
         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
-	    }
-        }
+        const appendTo = opt.appendTo;
+        const container = (
+            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
@@ -361,7 +353,7 @@ class TooltipHTMLContent {
     update(tooltipModel: Model<TooltipOption>) {
         // FIXME
         // Move this logic to ec main?
-        const container = this._api.getDom();
+        const container = this._container;
         const position = getComputedStyle(container, 'position');
         const domStyle = container.style;
         if (domStyle.position !== 'absolute' && position !== 'absolute') {
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 79af951dfaf..721a7189726 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
+     * Use `appendTo: 'body'` instead.
+     * @deprecated
      */
     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
 
 
     /**