diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index 2b3c261b..52add31a 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -183,6 +183,53 @@ Whether mouse is allowed to enter the floating layer of tooltip, whose default v
 
 Render mode for tooltip. By default, it is set to be `'html'` so that extra DOM element is used for tooltip. It can also set to be `'richText'` so that the tooltip will be rendered inside Canvas. This is very useful for environments that don't have DOM, such as Wechat applications.
 
+## renderMode(string) = 'richText'
+Render mode for tooltip. By default, it is set to be `'html'` so that extra DOM element is used for tooltip. It can also set to be `'richText'` so that the tooltip will be rendered inside Canvas. This is very useful for environments that don't have DOM, such as Wechat applications.
+```ts
+{
+    title: {
+        text: 'ECharts 入门示例'
+    },
+    tooltip: {
+        trigger: 'axis',
+        formatter: (e) => {
+            return `{d|● }{a|富文本测试}\n{b|富文本测试2}\n{c|富文本测试3\n富文本测试3\n富文本测试3}`;
+        },
+        renderMode: 'richText',
+        backgroundColor: "#fff",
+        textStyle: {
+            rich: {
+                a: {
+                    fill: 'red',
+                },
+                b: {
+                    fill: 'orange',
+                    width: 300,
+                }, c: {
+                    fill: 'yellow',
+                    backgroundColor: 'green'
+                },
+                d: {
+                    fill: 'orange',
+                    fontSize:30
+                },
+            },
+        }
+    },
+    xAxis: {
+        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+    },
+    yAxis: {},
+    series: [
+        {
+            name: '销量',
+            type: 'line',
+            data: [5, 20, 36, 10, 10, 20]
+        }
+    ],
+}
+```
+
 ## confine(boolean) = false
 
 <ExampleUIControlBoolean default="false" />
diff --git a/zh/option/component/tooltip.md b/zh/option/component/tooltip.md
index f75360d7..fa58d9d1 100644
--- a/zh/option/component/tooltip.md
+++ b/zh/option/component/tooltip.md
@@ -183,6 +183,73 @@ const option = {
 
 浮层的渲染模式，默认以 `'html` 即额外的 DOM 节点展示 tooltip；此外还可以设置为 `'richText'` 表示以富文本的形式渲染，渲染的结果在图表对应的 Canvas 中，这对于一些没有 DOM 的环境（如微信小程序）有更好的支持。
 
+## renderMode(string) = 'richText'
+
+<ExampleUIControlEnum options="html,richText" default="html" />
+
+浮层的渲染模式，默认以 `'html` 即额外的 DOM 节点展示 tooltip；此外还可以设置为 `'richText'` 表示以富文本的形式渲染，渲染的结果在图表对应的 Canvas 中，这对于一些没有 DOM 的环境（如微信小程序）有更好的支持。
+
+<ExampleBaseOption name="tooltip" title="提示框 richText" title-en="Tooltip">
+const option = {
+        backgroundColor: '#eee',
+        tooltip: {
+            show: true,
+            renderMode: 'richText',
+            enterable: true,
+            // position: [100, 100],
+            trigger: 'axis',
+            z: 100,
+            formatter: (e) => {
+                return e.map((v, i) => {
+                    return `{label|${v.axisValueLabel}} = {c${i}|${v.value}}`
+                }).join('\n')
+            },
+            textStyle: {
+                rich: {
+                    label: {
+                        color: 'red',
+                    },
+                    c0: {
+                        color: 'orange',
+                    },
+                    c1: {
+                        color: 'yellow',
+                        backgroundColor: 'green',
+                        padding: 5,
+                        borderColor: 'red',
+                        borderWidth: 1,
+                    },
+                    c2: {
+                        color: 'orange',
+                        fontSize: 30,
+                        height: 50
+                    },
+                },
+            }
+        },
+        yAxis: {
+            type: 'value'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['A', 'B', 'C']
+        },
+        series: [{
+            name: 'bar0',
+            type: 'bar',
+            data: [2, 3, 6]
+        }, {
+            name: 'bar1',
+            type: 'bar',
+            data: [1, 0, 9]
+        }, {
+            name: 'bar2',
+            type: 'bar',
+            data: ['-', 2, 1]
+        }]
+    };
+</ExampleBaseOption>
+
 ## confine(boolean) = false
 
 <ExampleUIControlBoolean default="false" />