diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index b326acd091..da1960835e 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,20 @@ 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,
+    container: HTMLElement | null | undefined,
+    zrX: number,
+    zrY: number
+) {
     const zrPainter = zr && zr.painter;
 
-    if (appendToBody) {
+    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, document.body, zrX, zrY);
+            transformLocalCoord(out, zrViewportRoot, container, zrX, zrY);
         }
     }
     else {
@@ -241,23 +247,22 @@ function makeStyleCoord(out: number[], zr: ZRenderType, appendToBody: boolean, z
 
 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.
+     * Specify target container of the tooltip element.
+     * Can either be an HTMLElement, CSS selector string, or a function that returns an HTMLElement.
      */
-    appendToBody: boolean
+    appendTo: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | HTMLElement | string
 }
 
 class TooltipHTMLContent {
 
     el: HTMLDivElement;
 
-    private _container: HTMLElement;
+    private _api: ExtensionAPI;
+    private _container: HTMLElement | undefined | null;
 
     private _show: boolean = false;
 
     private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];
-    private _appendToBody: boolean;
 
     private _enterable = true;
     private _zr: ZRenderType;
@@ -278,7 +283,6 @@ class TooltipHTMLContent {
     private _longHideTimeout: number;
 
     constructor(
-        container: HTMLElement,
         api: ExtensionAPI,
         opt: TooltipContentOption
     ) {
@@ -291,17 +295,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);
+        const appendTo = opt.appendTo;
+        const container: HTMLElement | null | undefined = appendTo && (
+            isString(appendTo)
+                ? document.querySelector(appendTo)
+                : isDom(appendTo)
+                    ? appendTo
+                    : isFunction(appendTo) && appendTo(api.getDom())
+        );
 
-        if (appendToBody) {
-            document.body.appendChild(el);
-        }
-        else {
-            container.appendChild(el);
-        }
+        makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
+
+        (container || api.getDom()).appendChild(el);
 
+        this._api = api;
         this._container = container;
 
         // FIXME
@@ -350,11 +358,13 @@ class TooltipHTMLContent {
     update(tooltipModel: Model<TooltipOption>) {
         // FIXME
         // Move this logic to ec main?
-        const container = this._container;
-        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
@@ -456,7 +466,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._container, zrX, zrY);
 
         if (styleCoord[0] != null && styleCoord[1] != null) {
             const style = this.el.style;
@@ -511,6 +521,7 @@ class TooltipHTMLContent {
 
     dispose() {
         this.el.parentNode.removeChild(this.el);
+        this.el = this._container = null;
     }
 
 }
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 413b52fb49..351cc0549b 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -61,13 +61,19 @@ 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
 
     /**
-     * specified class name of tooltip dom
+     * If append the tooltip element to another DOM element.
+     * Only available when renderMode is html
+     */
+    appendTo?: ((chartContainer: HTMLElement) => HTMLElement | undefined | null) | string | HTMLElement
+
+    /**
+     * Specify the class name of tooltip element
      * Only available when renderMode is html
      */
     className?: string
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 82a222cb1d..5600dc2925 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -171,8 +171,8 @@ class TooltipView extends ComponentView {
 
         this._tooltipContent = renderMode === 'richText'
             ? new TooltipRichContent(api)
-            : new TooltipHTMLContent(api.getDom(), api, {
-                appendToBody: tooltipModel.get('appendToBody', true)
+            : new TooltipHTMLContent(api, {
+                appendTo: tooltipModel.get('appendToBody', true) ? 'body' : tooltipModel.get('appendTo', true)
             });
     }
 
diff --git a/test/tooltip-appendTo.html b/test/tooltip-appendTo.html
new file mode 100644
index 0000000000..644697e17e
--- /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>
+