diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js index 6cdbc3f282..3dbd905816 100644 --- a/src/component/tooltip/TooltipContent.js +++ b/src/component/tooltip/TooltipContent.js @@ -145,6 +145,8 @@ function makeStyleCoord(out, zr, appendToBody, zrX, zrY) { out[1] += viewportRootOffset.offsetTop; } } + out[2] = out[0] / zr.getWidth(); // The ratio of left to width + out[3] = out[1] / zr.getHeight(); // The ratio of top to height } /** @@ -169,7 +171,7 @@ function TooltipContent(container, api, opt) { var zr = this._zr = api.getZr(); var appendToBody = this._appendToBody = opt && opt.appendToBody; - this._styleCoord = [0, 0]; + this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height] makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2); @@ -240,7 +242,7 @@ TooltipContent.prototype = { /** * Update when tooltip is rendered */ - update: function () { + update: function (tooltipModel) { // FIXME // Move this logic to ec main? var container = this._container; @@ -250,11 +252,25 @@ TooltipContent.prototype = { if (domStyle.position !== 'absolute' && stl.position !== 'absolute') { domStyle.position = 'relative'; } + var alwaysShowContent = tooltipModel.get('alwaysShowContent'); + alwaysShowContent && this._moveTooltipIfResized(); // Hide the tooltip // PENDING // this.hide(); }, + /** + * when `alwaysShowContent` is true, + * we should move the tooltip after chart resized + */ + _moveTooltipIfResized: function () { + var ratioX = this._styleCoord[2]; // The ratio of left to width + var ratioY = this._styleCoord[3]; // The ratio of top to height + var realX = ratioX * this._zr.getWidth(); + var realY = ratioY * this._zr.getHeight(); + this.moveTo(realX, realY); + }, + show: function (tooltipModel) { clearTimeout(this._hideTimeout); var el = this.el; @@ -269,10 +285,10 @@ TooltipContent.prototype = { el.style.display = el.innerHTML ? 'block' : 'none'; - // If mouse occsionally move over the tooltip, a mouseout event will be - // triggered by canvas, and cuase some unexpectable result like dragging + // If mouse occasionally move over the tooltip, a mouseout event will be + // triggered by canvas, and cause some unexpectable result like dragging // stop, "unfocusAdjacency". Here `pointer-events: none` is used to solve - // it. Although it is not suppored by IE8~IE10, fortunately it is a rare + // it. Although it is not supported by IE8~IE10, fortunately it is a rare // scenario. el.style.pointerEvents = this._enterable ? 'auto' : 'none'; @@ -310,7 +326,7 @@ TooltipContent.prototype = { if (this._show && !(this._inContent && this._enterable)) { if (time) { this._hideDelay = time; - // Set show false to avoid invoke hideLater mutiple times + // Set show false to avoid invoke hideLater multiple times this._show = false; this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time); } diff --git a/src/component/tooltip/TooltipRichContent.js b/src/component/tooltip/TooltipRichContent.js index 34c0f7516a..1c5743343f 100644 --- a/src/component/tooltip/TooltipRichContent.js +++ b/src/component/tooltip/TooltipRichContent.js @@ -21,13 +21,25 @@ import * as zrUtil from 'zrender/src/core/util'; // import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; + +function makeStyleCoord(out, zr, zrX, zrY) { + out[0] = zrX; + out[1] = zrY; + out[2] = out[0] / zr.getWidth(); // The ratio of left to width + out[3] = out[1] / zr.getHeight(); // The ratio of top to height +} + /** * @alias module:echarts/component/tooltip/TooltipRichContent * @constructor */ function TooltipRichContent(api) { - this._zr = api.getZr(); + var zr = this._zr = api.getZr(); + + this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height] + + makeStyleCoord(this._styleCoord, zr, api.getWidth() / 2, api.getHeight() / 2); this._show = false; @@ -50,8 +62,21 @@ TooltipRichContent.prototype = { /** * Update when tooltip is rendered */ - update: function () { - // noop + update: function (tooltipModel) { + var alwaysShowContent = tooltipModel.get('alwaysShowContent'); + alwaysShowContent && this._moveTooltipIfResized(); + }, + + /** + * when `alwaysShowContent` is true, + * we should move the tooltip after chart resized + */ + _moveTooltipIfResized: function () { + var ratioX = this._styleCoord[2]; // The ratio of left to width + var ratioY = this._styleCoord[3]; // The ratio of top to height + var realX = ratioX * this._zr.getWidth(); + var realY = ratioY * this._zr.getHeight(); + this.moveTo(realX, realY); }, show: function (tooltipModel) { @@ -150,7 +175,9 @@ TooltipRichContent.prototype = { moveTo: function (x, y) { if (this.el) { - this.el.attr('position', [x, y]); + var styleCoord = this._styleCoord; + makeStyleCoord(styleCoord, this._zr, x, y); + this.el.attr('position', [styleCoord[0], styleCoord[1]]); } }, @@ -165,7 +192,7 @@ TooltipRichContent.prototype = { if (this._show && !(this._inContent && this._enterable)) { if (time) { this._hideDelay = time; - // Set show false to avoid invoke hideLater mutiple times + // Set show false to avoid invoke hideLater multiple times this._show = false; this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time); } diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js index a7c980f96f..1096ce75ea 100644 --- a/src/component/tooltip/TooltipView.js +++ b/src/component/tooltip/TooltipView.js @@ -109,7 +109,7 @@ export default echarts.extendComponentView({ this._alwaysShowContent = tooltipModel.get('alwaysShowContent'); var tooltipContent = this._tooltipContent; - tooltipContent.update(); + tooltipContent.update(tooltipModel); tooltipContent.setEnterable(tooltipModel.get('enterable')); this._initGlobalListener(); @@ -339,7 +339,7 @@ export default echarts.extendComponentView({ _showOrMove: function (tooltipModel, cb) { // showDelay is used in this case: tooltip.enterable is set // as true. User intent to move mouse into tooltip and click - // something. `showDelay` makes it easyer to enter the content + // something. `showDelay` makes it easier to enter the content // but tooltip do not move immediately. var delay = tooltipModel.get('showDelay'); cb = zrUtil.bind(cb, this); @@ -424,7 +424,7 @@ export default echarts.extendComponentView({ // Default tooltip content // FIXME - // (1) shold be the first data which has name? + // (1) should be the first data which has name? // (2) themeRiver, firstDataIndex is array, and first line is unnecessary. var firstLine = valueLabel; if (renderMode !== 'html') { @@ -540,7 +540,7 @@ export default echarts.extendComponentView({ var asyncTicket = Math.random(); // Do not check whether `trigger` is 'none' here, because `trigger` - // only works on cooridinate system. In fact, we have not found case + // only works on coordinate system. In fact, we have not found case // that requires setting `trigger` nothing on component yet. this._showOrMove(subTooltipModel, function () { diff --git a/test/tooltip-windowResize.html b/test/tooltip-windowResize.html new file mode 100644 index 0000000000..cdf2492408 --- /dev/null +++ b/test/tooltip-windowResize.html @@ -0,0 +1,383 @@ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +