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)
             });
     }