feat(tooltip): add appendTo option to allow customizing tooltip container

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, container: HTMLElement | null, 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 +241,25 @@ 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.
+     * 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 {
 
     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 _appendToBody: boolean;
 
     private _enterable = true;
     private _zr: ZRenderType;
@@ -278,7 +280,6 @@ class TooltipHTMLContent {
     private _longHideTimeout: number;
 
     constructor(
-        container: HTMLElement,
         api: ExtensionAPI,
         opt: TooltipContentOption
     ) {
@@ -291,17 +292,27 @@ 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 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
+	    }
         }
-        else {
+
+        makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
+
+        if (container) {
             container.appendChild(el);
+        } else {
+            api.getDom().appendChild(el);
         }
 
+        this._api = api
         this._container = container;
 
         // FIXME
@@ -350,7 +361,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') {
@@ -456,7 +467,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;

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

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