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