You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/07/08 10:24:54 UTC
[echarts] branch fix-tooltip-dom created (now edc4367)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch fix-tooltip-dom
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at edc4367 1) fix(tooltip): tooltip should show DOM content instead of the string [object HTMLSpanElement], resolves #15307.
This branch includes the following new commits:
new edc4367 1) fix(tooltip): tooltip should show DOM content instead of the string [object HTMLSpanElement], resolves #15307.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/01: 1) fix(tooltip): tooltip should show DOM content
instead of the string [object HTMLSpanElement], resolves #15307.
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix-tooltip-dom
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit edc4367c8da2c8e2189971c470912ffdd62cb0ca
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Thu Jul 8 17:51:08 2021 +0800
1) fix(tooltip): tooltip should show DOM content instead of the string [object HTMLSpanElement], resolves #15307.
2) feat(tooltip): formatter can be HTMLElement. (only string/HTMLElement array previously)
3) chore(tooltip): don't show arrow when empty.
---
src/component/tooltip/TooltipHTMLContent.ts | 18 ++++--
src/component/tooltip/TooltipRichContent.ts | 2 +-
src/component/tooltip/TooltipView.ts | 47 ++++++++-------
src/util/types.ts | 8 ++-
test/tooltip-domnode.html | 88 +++++++++++++++++++++++++++++
5 files changed, 133 insertions(+), 30 deletions(-)
diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 6ee2664..73b5b2b 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -397,7 +397,7 @@ class TooltipHTMLContent {
}
setContent(
- content: string | HTMLElement[],
+ content: string | HTMLElement | HTMLElement[],
markers: unknown,
tooltipModel: Model<TooltipOption>,
borderColor?: ZRColor,
@@ -407,14 +407,14 @@ class TooltipHTMLContent {
return;
}
- const el = this.el;
-
+ let arrow = '';
if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item'
&& !shouldTooltipConfine(tooltipModel)) {
- content += assembleArrow(tooltipModel.get('backgroundColor'), borderColor, arrowPosition);
+ arrow = assembleArrow(tooltipModel.get('backgroundColor'), borderColor, arrowPosition);
}
+ const el = this.el;
if (isString(content)) {
- el.innerHTML = content;
+ el.innerHTML = content + arrow;
}
else if (content) {
// Clear previous
@@ -427,6 +427,14 @@ class TooltipHTMLContent {
el.appendChild(content[i]);
}
}
+ // no arrow if empty
+ if (arrow && el.childNodes.length) {
+ // no need to create a new parent element, but it's not supported by IE 10 and older.
+ // const arrowEl = document.createRange().createContextualFragment(arrow);
+ const arrowEl = document.createElement('div');
+ arrowEl.innerHTML = arrow;
+ el.appendChild(arrowEl);
+ }
}
}
diff --git a/src/component/tooltip/TooltipRichContent.ts b/src/component/tooltip/TooltipRichContent.ts
index 94c2e6d..59cb944 100644
--- a/src/component/tooltip/TooltipRichContent.ts
+++ b/src/component/tooltip/TooltipRichContent.ts
@@ -71,7 +71,7 @@ class TooltipRichContent {
* Set tooltip content
*/
setContent(
- content: string | HTMLElement[],
+ content: string | HTMLElement | HTMLElement[],
markupStyleCreator: TooltipMarkupStyleCreator,
tooltipModel: Model<TooltipOption>,
borderColor: ZRColor,
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 71b3454..d667d10 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -784,7 +784,7 @@ class TooltipView extends ComponentView {
const formatter = tooltipModel.get('formatter');
positionExpr = positionExpr || tooltipModel.get('position');
- let html: string | HTMLElement[] = defaultHtml;
+ let html: string | HTMLElement | HTMLElement[] = defaultHtml;
const nearPoint = this._getNearestPoint(
[x, y],
params,
@@ -793,27 +793,32 @@ class TooltipView extends ComponentView {
);
const nearPointColor = nearPoint.color;
- if (formatter && zrUtil.isString(formatter)) {
- const useUTC = tooltipModel.ecModel.get('useUTC');
- const params0 = zrUtil.isArray(params) ? params[0] : params;
- const isTimeAxis = params0 && params0.axisType && params0.axisType.indexOf('time') >= 0;
- html = formatter;
- if (isTimeAxis) {
- html = timeFormat(params0.axisValue, html, useUTC);
- }
- html = formatUtil.formatTpl(html, params, true);
- }
- else if (zrUtil.isFunction(formatter)) {
- const callback = bind(function (cbTicket: string, html: string | HTMLElement[]) {
- if (cbTicket === this._ticket) {
- tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
- this._updatePosition(
- tooltipModel, positionExpr, x, y, tooltipContent, params, el
- );
+ if (formatter) {
+ if (zrUtil.isString(formatter)) {
+ const useUTC = tooltipModel.ecModel.get('useUTC');
+ const params0 = zrUtil.isArray(params) ? params[0] : params;
+ const isTimeAxis = params0 && params0.axisType && params0.axisType.indexOf('time') >= 0;
+ html = formatter;
+ if (isTimeAxis) {
+ html = timeFormat(params0.axisValue, html, useUTC);
}
- }, this);
- this._ticket = asyncTicket;
- html = formatter(params, asyncTicket, callback);
+ html = formatUtil.formatTpl(html, params, true);
+ }
+ else if (zrUtil.isFunction(formatter)) {
+ const callback = bind(function (cbTicket: string, html: string | HTMLElement | HTMLElement[]) {
+ if (cbTicket === this._ticket) {
+ tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
+ this._updatePosition(
+ tooltipModel, positionExpr, x, y, tooltipContent, params, el
+ );
+ }
+ }, this);
+ this._ticket = asyncTicket;
+ html = formatter(params, asyncTicket, callback);
+ }
+ else {
+ html = formatter;
+ }
}
tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
diff --git a/src/util/types.ts b/src/util/types.ts
index 243b95d..ac322c6 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1228,13 +1228,15 @@ export interface TooltipFormatterCallback<T> {
* For sync callback
* params will be an array on axis trigger.
*/
- (params: T, asyncTicket: string): string | HTMLElement[]
+ (params: T, asyncTicket: string): string | HTMLElement | HTMLElement[]
/**
* For async callback.
* Returned html string will be a placeholder when callback is not invoked.
*/
- (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement[]) => void)
- : string | HTMLElement[]
+ (
+ params: T, asyncTicket: string,
+ callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement | HTMLElement[]) => void
+ ) : string | HTMLElement | HTMLElement[]
}
type TooltipBuiltinPosition = 'inside' | 'top' | 'left' | 'right' | 'bottom';
diff --git a/test/tooltip-domnode.html b/test/tooltip-domnode.html
index 50686c3..dc53d02 100644
--- a/test/tooltip-domnode.html
+++ b/test/tooltip-domnode.html
@@ -33,6 +33,9 @@ under the License.
</head>
<body>
<div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
@@ -69,6 +72,91 @@ under the License.
});
</script>
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+ var tooltipContent = document.createElement('span');
+ tooltipContent.innerText = 'Tooltip formatter is a DOM node (not function callback)';
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ formatter: tooltipContent
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Tooltip formatter is DOM node (not function callback)'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+ var tooltipContent = document.createElement('a');
+ tooltipContent.href = 'javascript:void(0);';
+ tooltipContent.onclick = () => console.log('test');
+ tooltipContent.textContent = 'Olala';
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ position: 'top',
+ enterable: true,
+ formatter: [tooltipContent]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Tooltip should show DOM content instead of the string **[object HTMLSpanElement]**',
+ 'https://github.com/apache/echarts/issues/15307'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ position: 'top',
+ enterable: true,
+ formatter: []
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Tooltip should show nothing',
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org