You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/03/01 11:09:58 UTC
[incubator-echarts-doc] branch master updated: feature: add doc
tooltip.appendToBody
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new ee1b35e feature: add doc tooltip.appendToBody
ee1b35e is described below
commit ee1b35e4748d088594652f5818a46a25be096ae4
Author: 100pah <su...@gmail.com>
AuthorDate: Sun Mar 1 19:09:37 2020 +0800
feature: add doc tooltip.appendToBody
---
en/option/component/tooltip.md | 11 +++++++++++
zh/option/component/tooltip.md | 11 +++++++++++
2 files changed, 22 insertions(+)
diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index c522b5c..26b3862 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -68,6 +68,17 @@ Whether confine tooltip content in the view rect of chart instance.
Useful when tooltip is cut because of `'overflow: hidden'` set on outer dom of chart instance, or because of narrow screen on mobile.
+## appendToBody(boolean) = false
+
+Whether to append the tooltip DOM element as a child of the `<body>` of the HTML page, when using [renderMode](~tooltip.renderMode) `'html'`.
+
+By default `false`, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with `overflow: hidden`. This case could also be resolved by setting [tooltip.confine](~tooltip.confine), but it might not suitable for all scenarios.
+
+Here we provide `appendToBody: true` to auto append the tooltip element to `<body>`, which is a common way to resolve this kind of issue. But `true` is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.
+
+Note that it also works when CSS transform used.
+
+
## transitionDuration(number) = 0.4
The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.
diff --git a/zh/option/component/tooltip.md b/zh/option/component/tooltip.md
index 2db35b9..18e45ad 100644
--- a/zh/option/component/tooltip.md
+++ b/zh/option/component/tooltip.md
@@ -68,6 +68,17 @@
当图表外层的 dom 被设置为 `'overflow: hidden'`，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
+## appendToBody(boolean) = false
+
+是否将 tooltip 的 DOM 节点添加为 HTML 的 `<body>` 的子节点。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
+
+默认值是 `false`。`false` 表示，tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致，如果本图表的 DOM container 的祖先节点有设置 `overflow: hidden`，那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 [tooltip.confine](~tooltip.confine) 来解决，但是不一定能解决所有场景。
+
+所以这里我们提供了 `appendToBody: true` 来解决这件事。这也是常见的解决此类问题的一种方式。但是 `true` 并不定为默认值，因为要避免 break change，尤其是一些对于 tooltip 深入定制的使用。并且也避免一些未知的 bad case。
+
+注：CSS transform 的场景，这也可以使用。
+
+
## transitionDuration(number) = 0.4
提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org