Merge pull request #8049 from xinpureZhu/master

Tooltip dom append to body, use to top of layer

src/component/tooltip/TooltipContent.js

@@ -138,7 +138,7 @@ function TooltipContent(container, api) {
     this._x = api.getWidth() / 2;
     this._y = api.getHeight() / 2;
 
-    container.appendChild(el);
+    document.body.appendChild(el);
 
     this._container = container;
 
@@ -292,6 +292,11 @@ TooltipContent.prototype = {
         return this._show;
     },
 
+
+    dispose: function () {
+        this.el.parentNode.removeChild(this.el)
+    },
+
     getOuterSize: function () {
         var width = this.el.clientWidth;
         var height = this.el.clientHeight;
@@ -308,6 +313,7 @@ TooltipContent.prototype = {
 
         return {width: width, height: height};
     }
+
 };
 
 export default TooltipContent;

src/component/tooltip/TooltipView.js

@@ -65,6 +65,10 @@ export default echarts.extendComponentView({
         }
 
         this._tooltipContent = tooltipContent;
+
+        this._event = {};
+        this._viewWidth = document.body.clientWidth;
+        this._viewHeight = document.body.clientHeight;
     },
 
     render: function (tooltipModel, ecModel, api) {
@@ -126,6 +130,7 @@ export default echarts.extendComponentView({
                 // If 'none', it is not controlled by mouse totally.
                 if (triggerOn !== 'none') {
                     if (triggerOn.indexOf(currTrigger) >= 0) {
+                        this._event = e.event;
                         this._tryShow(e, dispatchAction);
                     }
                     else if (currTrigger === 'leave') {
@@ -201,7 +206,8 @@ export default echarts.extendComponentView({
             this._tryShow({
                 offsetX: payload.x,
                 offsetY: payload.y,
-                target: el
+                target: el,
+                event: this._event
             }, dispatchAction);
         }
         else if (dataByCoordSys) {
@@ -209,7 +215,7 @@ export default echarts.extendComponentView({
                 offsetX: payload.x,
                 offsetY: payload.y,
                 position: payload.position,
-                event: {},
+                event: this._event,
                 dataByCoordSys: payload.dataByCoordSys,
                 tooltipOption: payload.tooltipOption
             }, dispatchAction);
@@ -229,7 +235,7 @@ export default echarts.extendComponentView({
                     offsetY: cy,
                     position: payload.position,
                     target: pointInfo.el,
-                    event: {}
+                    event: this._event
                 }, dispatchAction);
             }
         }
@@ -247,7 +253,7 @@ export default echarts.extendComponentView({
                 offsetY: payload.y,
                 position: payload.position,
                 target: api.getZr().findHover(payload.x, payload.y).target,
-                event: {}
+                event: this._event
             }, dispatchAction);
         }
     },
@@ -314,8 +320,8 @@ export default echarts.extendComponentView({
         }
 
         // Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
-        this._lastX = e.offsetX;
-        this._lastY = e.offsetY;
+        this._lastX = e.event.pageX;
+        this._lastY = e.event.pageY;
 
         var dataByCoordSys = e.dataByCoordSys;
         if (dataByCoordSys && dataByCoordSys.length) {
@@ -353,7 +359,7 @@ export default echarts.extendComponentView({
     _showAxisTooltip: function (dataByCoordSys, e) {
         var ecModel = this._ecModel;
         var globalTooltipModel = this._tooltipModel;
-        var point = [e.offsetX, e.offsetY];
+        var point = [e.event.pageX, e.event.pageY];
         var singleDefaultHTML = [];
         var singleParamsList = [];
         var singleTooltipModel = buildTooltipModel([
@@ -509,7 +515,7 @@ export default echarts.extendComponentView({
         this._showOrMove(tooltipModel, function () {
             this._showTooltipContent(
                 tooltipModel, defaultHtml, params, asyncTicket,
-                e.offsetX, e.offsetY, e.position, e.target, markers
+                e.event.pageX, e.event.pageY, e.position, e.target, markers
             );
         });
 
@@ -545,7 +551,7 @@ export default echarts.extendComponentView({
         this._showOrMove(subTooltipModel, function () {
             this._showTooltipContent(
                 subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {},
-                asyncTicket, e.offsetX, e.offsetY, e.position, el
+                asyncTicket, e.event.pageX, e.event.pageY, e.position, el
             );
         });
 
@@ -607,8 +613,8 @@ export default echarts.extendComponentView({
      * @return {Array.<number>}
      */
     _updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) {
-        var viewWidth = this._api.getWidth();
-        var viewHeight = this._api.getHeight();
+        var viewWidth = this._viewWidth;
+        var viewHeight = this._viewHeight;
         positionExpr = positionExpr || tooltipModel.get('position');
 
         var contentSize = content.getSize();
@@ -727,7 +733,7 @@ export default echarts.extendComponentView({
         if (env.node) {
             return;
         }
-        this._tooltipContent.hide();
+        this._tooltipContent.dispose();
         globalListener.unregister('itemTooltip', api);
     }
 });