[5.0] Allow passing of DOM nodes to setContent

src/component/tooltip/TooltipHTMLContent.ts

@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import { isString, indexOf, map, each, bind } from 'zrender/src/core/util';
+import { isString, indexOf, map, each, bind, isObject, isArray, isDom } from 'zrender/src/core/util';
 import { toHex } from 'zrender/src/tool/color';
 import { normalizeEvent } from 'zrender/src/core/event';
 import { transformLocalCoord } from 'zrender/src/core/dom';
@@ -365,7 +365,7 @@ class TooltipHTMLContent {
     }
 
     setContent(
-        content: string,
+        content: string | HTMLElement[],
         markers: unknown,
         tooltipModel: Model<TooltipOption>,
         borderColor?: ZRColor,
@@ -375,12 +375,27 @@ class TooltipHTMLContent {
             return;
         }
 
+        const el = this.el;
+
         if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item'
             && !shouldTooltipConfine(tooltipModel)) {
             content += assembleArrow(tooltipModel.get('backgroundColor'), borderColor, arrowPosition);
         }
-
-        this.el.innerHTML = content;
+        if (isString(content)) {
+            el.innerHTML = content == null ? '' : content;
+        }
+        else if (content) {
+            // Clear previous
+            el.innerHTML = '';
+            if (!isArray(content)) {
+                content = [content];
+            }
+            for (let i = 0; i < content.length; i++) {
+                if (isDom(content[i]) && content[i].parentNode !== el) {
+                    el.appendChild(content[i]);
+                }
+            }
+        }
     }
 
     setEnterable(enterable: boolean) {

src/component/tooltip/TooltipRichContent.ts

@@ -70,12 +70,15 @@ class TooltipRichContent {
      * Set tooltip content
      */
     setContent(
-        content: string,
+        content: string | HTMLElement[],
         markupStyleCreator: TooltipMarkupStyleCreator,
         tooltipModel: Model<TooltipOption>,
         borderColor: ZRColor,
         arrowPosition: TooltipOption['position']
     ) {
+        if (zrUtil.isObject(content)) {
+            throw new Error("Passing DOM nodes as content is not supported in richText tooltip!");
+        }
         if (this.el) {
             this._zr.remove(this.el);
         }

src/component/tooltip/TooltipView.ts

@@ -707,7 +707,7 @@ class TooltipView extends ComponentView {
 
         const formatter = tooltipModel.get('formatter');
         positionExpr = positionExpr || tooltipModel.get('position');
-        let html = defaultHtml;
+        let html: string | HTMLElement[] = defaultHtml;
         const nearPoint = this._getNearestPoint(
             [x, y],
             params,
@@ -718,7 +718,7 @@ class TooltipView extends ComponentView {
             html = formatUtil.formatTpl(formatter, params, true);
         }
         else if (zrUtil.isFunction(formatter)) {
-            const callback = bind(function (cbTicket: string, html: string) {
+            const callback = bind(function (cbTicket: string, html: string | HTMLElement[]) {
                 if (cbTicket === this._ticket) {
                     tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPoint.color, positionExpr);
                     this._updatePosition(

src/util/types.ts

@@ -1053,12 +1053,12 @@ interface TooltipFormatterCallback<T> {
      * For sync callback
      * params will be an array on axis trigger.
      */
-    (params: T, asyncTicket: string): string
+    (params: T, asyncTicket: string): string | HTMLElement[]
     /**
      * For async callback.
      * Returned html string will be a placeholder when callback is not invoked.
      */
-    (params: T, asyncTicket: string, callback: (cbTicket: string, html: string) => void): string
+    (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement[]) => void): string | HTMLElement[]
 }
 
 type TooltipBuiltinPosition = 'inside' | 'top' | 'left' | 'right' | 'bottom';