docs: improve tooltip caution description

content/show/popover/index.md

@@ -22,7 +22,8 @@ import { Popover } from '@douyinfe/semi-ui';
 ```
 ### 基本使用
 
-将浮层的触发器 Trigger 作为`children`，使用 Popover 包裹（如下的例子中触发器为 Tag 元素）。浮层内容通过`content`传入
+将浮层的触发器 Trigger 作为`children`，使用 Popover 包裹（如下的例子中触发器为 Tag 元素）。浮层内容通过`content`传入   
+注意事项同 [Tooltip](/zh-CN/show/tooltip#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9) 
 
 ```jsx live=true
 import React from 'react';
@@ -74,69 +75,56 @@ function Demo() {
         ['bottomRight', 'BR'],
     ];
 
+    const article = (
+        <article style={{ padding: 12 }}>
+            Hi ByteDancer, this is a popover.
+            <br /> We have 2 lines.
+        </article>
+    );
+
     return (
-        <div style={{ paddingLeft: 40 }} className="tag-margin-right">
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
+        <div>
+            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>
                 {tops.map((pos, index) => (
                     <Popover
-                        content={
-                            <article style={{ padding: 12 }}>
-                                Hi ByteDancer, this is a popover.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
+                        content={article}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Popover>
                 ))}
             </div>
-            <div style={{ width: 40, float: 'left' }}>
+            <div style={{ width: 80, float: 'left' }}>
                 {lefts.map((pos, index) => (
                     <Popover
-                        content={
-                            <article style={{ padding: 12 }}>
-                                Hi ByteDancer, this is a popover.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
+                        content={article}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Popover>
                 ))}
             </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
+            <div style={{ width: 40, marginLeft: 300 }}>
                 {rights.map((pos, index) => (
                     <Popover
-                        content={
-                            <article style={{ padding: 12 }}>
-                                Hi ByteDancer, this is a popover.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
+                        content={article}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Popover>
                 ))}
             </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
+            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>
                 {bottoms.map((pos, index) => (
                     <Popover
-                        content={
-                            <article style={{ padding: 12 }}>
-                                Hi ByteDancer, this is a popover.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
+                        content={article}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Popover>
                 ))}
             </div>
@@ -429,12 +417,9 @@ function Demo() {
             content={
                 <article style={{ padding: 4 }}>
                     Hi ByteDancer, this is a popover.
-                    <br /> We have 2 lines.
                 </article>
             }
-            trigger="custom"
             position='right'
-            visible
             showArrow
             style={{
                 backgroundColor: 'rgba(var(--semi-blue-4),1)',
@@ -444,10 +429,18 @@ function Demo() {
                 borderStyle: 'solid',
             }}
         >
-            <Tag>点击此处</Tag>
+            <Tag
+                style={{
+                    backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                    color: 'var(--semi-color-white)'
+                }}
+            >
+                点击此处
+            </Tag>
         </Popover>
     );
 }
+
 ```
 
 ### 初始化弹出层焦点位置
@@ -538,11 +531,13 @@ import { Button, Input, Popover, Space } from '@douyinfe/semi-ui';
 ## FAQ
 
 -   **为什么 Popover 浮层卡片的位置和浮层的触发器的相对位置不符合预期?**  
-    Popover 底层依赖了 Tooltip，Tooltip 为了计算定位，需要获取到 children 的真实 DOM 元素，因此 Popover 类型目前支持如下两种类型的 children：
-    1. 真实 dom 节点的 jsx 类型，如 span，div，p...
-    2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到真实的 dom 节点上
+    Popover 底层依赖了 Tooltip，Tooltip 为了计算定位，需要获取到 children 的真实 DOM 元素，因此 Popover 类型目前支持如下类型的 children：
+
+    1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上
+    2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上
+    3. 真实 DOM 节点, 如 span，div，p...
 
-    若以带有前缀的 Semi Input 作为 children，即使设置了 Input 和 Popover content等宽，浮层卡片的位置仍是相对于不包含前缀部分的 input 框进行定位，此时只要在 Input 外层再套一个 div 就能解决问题。
+    若通过 ref 或 findDOMNode 获取到的真实 DOM 节点宽高并非是你的 children 元素的全部，则位置可能有出入。例如设置了 prefix、suffix 的 Input，Popover位置仍是相对于不包含前缀部分的 input 框进行定位，此时只要在 Input 外层再套一个 div 就能解决问题。
 
 -   **为什么 Popover 浮层卡片在靠近屏幕边界宽度不够时，丢失宽度意外换行?**  
     在 chromium 104 后 对于屏幕边界文本宽度不够时的换行渲染策略发生变化，详细原因可查看 [issue #1022](https://github.com/DouyinFE/semi-design/issues/1022)，semi侧已经在v2.17.0版本修复了这个问题。

content/show/tooltip/index-en-US.md

@@ -19,129 +19,60 @@ import { Tooltip } from '@douyinfe/semi-ui';
 
 ### Cautions
 
-In order to calculate the positioning, ToolTip needs to obtain the real DOM elements of the children, so the ToolTip type currently supports the following two types of children
+Tooltip needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element 
 
-1. The Jsx type of the real dom node, such as span, div, p...
-2. Use the FunctionComponent wrapped by forwardRef to pass props and ref to the real dom node
+At the same time, in order to calculate the positioning of the popup layer, it is necessary to obtain the real DOM elements of the children, so Tooltip supports the following types of children 
 
-```jsx live=true hideInDSM
-import React, { forwardRef } from 'react';
-import { Tooltip } from '@douyinfe/semi-ui';
+1. Class Component, it is not mandatory to bind ref, but you need to ensure that props can be transparently transmitted to the real DOM node 
+2. Use the functional component wrapped by forwardRef to transparently transmit props and ref to the real DOM node in children 
+3. Real DOM nodes, such as span, div, p...  
 
-function Demo() {
-    const Test = forwardRef((props, ref) => (
-        <span {...props} ref={ref}>
-            Test
-        </span>
-    ));
-    return (
-        <Tooltip content={'hi bytedance'}>
-            <Test />
-        </Tooltip>
-    );
-}
-```
-
-### Basic Usage
-
-You can use Tooltip to wrap any support `onClick`/`onMouseEnter`/`onMouseLeave` The components.
-
-Of course, the components of the package may be bound to their own. `onClick`/`onMouseEnter`/`onMouseLeave` Wait for the event, in which case you need to choose the right Trigger time for Tooltip.
+```jsx live=true noInline=true dir="column"
+import React, { forwardRef } from 'react';
+import { Tooltip, Space } from '@douyinfe/semi-ui';
 
-For example:
+const style={ border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };
 
--   The component has been bound to the `onClick` event, so Tooltip's `trigger`parameter value is best passed to `hover`.
--   The component has been bound to the `onMouseEnter`/`onMouseLeave` event, and the `trigger` parameter value of Tooltip is best transmitted to `click`.
+// Spread the props to the underlying DOM element. binding ref
+const FCChildren = forwardRef((props, ref) => {
+    return (<span {...props} ref={ref} style={style}>Functional Component</span>);
+});
 
-```jsx live=true hideInDSM
-import React from 'react';
-import { Tooltip, Tag } from '@douyinfe/semi-ui';
+// Spread the props to the underlying DOM element.
+class MyComponent extends React.Component {
+    render() {
+        return (<span {...this.props} style={style}>ClassComponent</span>);
+    }
+};
 
 function Demo() {
     return (
-        <Tooltip content={'hi bytedance'}>
-            <Tag>Hover here</Tag>
-        </Tooltip>
-    );
-}
-```
-
-### Trigger Timing
-
--   Configure the timing of the trigger display, the default is `hover`, optional `hover` / `focus` / `click` / `custom`
--   When set to `custom`, it needs to be used in conjunction with the `visible`attribute, at which point the display is completely controlled
-
-```jsx live=true hideInDSM
-import React, { useState } from 'react';
-import { Tooltip, Button, ButtonGroup, Input } from '@douyinfe/semi-ui';
-
-function Demo() {
-    const [visible, setVisible] = useState(false);
-    // Container needs to set position: relative
-    const getPopupContainer = () => document.querySelector('#tooltip-container');
-
-    return (
-        <div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }} id="tooltip-container">
-            <div style={{ width: '150%', height: '150%', paddingLeft: 50, paddingTop: 50 }}>
-                <Tooltip content={'hi bytedance'} getPopupContainer={getPopupContainer}>
-                    <Button style={{ marginBottom: 20 }}>Hover to show</Button>
-                </Tooltip>
-                <br />
-                <Tooltip content={'hi bytedance'} trigger="click" getPopupContainer={getPopupContainer}>
-                    <Button style={{ marginBottom: 20 }}>Click to show</Button>
-                </Tooltip>
-                <br />
-                <Tooltip content={'hi bytedance'} trigger="focus" getPopupContainer={getPopupContainer}>
-                    <Input style={{ width: 150, marginBottom: 20 }} placeholder="Focus to show" />
-                </Tooltip>
-                <br />
-                <Tooltip
-                    content={'hi bytedance'}
-                    trigger="custom"
-                    visible={visible}
-                    getPopupContainer={getPopupContainer}
-                >
-                    <span style={{ display: 'inline-block' }}>
-                        <ButtonGroup>
-                            <Button onClick={() => setVisible(true)}>Controlled show</Button>
-                            <Button onClick={() => setVisible(false)}>Controlled hide</Button>
-                        </ButtonGroup>
-                    </span>
-                </Tooltip>
-            </div>
-        </div>
+        <Space>
+            <Tooltip content={'semi design'}>
+                <FCChildren />
+            </Tooltip>
+            <Tooltip content={'semi design'}>
+                <MyComponent />
+            </Tooltip>
+            <Tooltip content={'semi design'}>
+                <span style={style}>DOM</span>
+            </Tooltip>
+        </Space>
     );
 }
-```
+render(Demo);
 
-### Override Style
-
-Configure specific styles for the pop-up layer through the `className` and `style` API, such as overriding the default maxWidth (280px)
-
-```jsx live=true
-import React from 'react';
-import { Tooltip, Tag } from '@douyinfe/semi-ui';
-
-() => {
-    return (
-        <Tooltip
-            style={{
-                maxWidth: 320,
-            }}
-            className="another-classname"
-            content={'hi semi semi semi semi semi semi semi'}
-        >
-            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
-        </Tooltip>
-    );
-};
 ```
 
 ### Position
 
-Support pop-up layers are displayed in different directions in 12 directions
+The direction and alignment position of the popup layer can be configured through `position`. For detailed optional values of position, please refer to the API document below 
 
-```jsx live=true hideInDSM
+When configured as `topLeft`, it pops up, and the popup layer is left-aligned with the children (when arrowPointAtCenter=false) . 
+When configured as `topRight`, it pops up, and the popup layer is right-aligned with the children (when arrowPointAtCenter=false) . 
+Same for other directions
+
+```jsx live=true dir="column"
 import React from 'react';
 import { Tooltip, Tag } from '@douyinfe/semi-ui';
 
@@ -168,8 +99,8 @@ function Demo() {
     ];
 
     return (
-        <div style={{ paddingLeft: 40 }}>
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
+        <div>
+            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>
                 {tops.map((pos, index) => (
                     <Tooltip
                         content={
@@ -178,14 +109,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ width: 40, float: 'left' }}>
+            <div style={{ width: 80, float: 'left' }}>
                 {lefts.map((pos, index) => (
                     <Tooltip
                         content={
@@ -194,14 +126,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
+            <div style={{ width: 40, marginLeft: 300 }}>
                 {rights.map((pos, index) => (
                     <Tooltip
                         content={
@@ -210,14 +143,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
+            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>
                 {bottoms.map((pos, index) => (
                     <Tooltip
                         content={
@@ -226,10 +160,11 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
@@ -238,138 +173,134 @@ function Demo() {
 }
 ```
 
-### Render to Specified DOM
 
-With `getPopupContainer` the bullet layer will be rendered to the DOM returned by the function.
+### Arrow Point at Center
 
-**It should be noted that:** The returned container, if not `document.body`,**`position` Will be set by default `"relative"`**(Version > = 0.18.0).
+By default `arrowPointAtCenter=true`, the small triangle always points to the center of the children element.  
+You can set it to false and the little triangle will no longer keep pointing to the center of the element. The popover is aligned to the edges of the children 
 
-```jsx live=true hideInDSM
+```jsx live=true
 import React from 'react';
-import { Tooltip, Tag } from '@douyinfe/semi-ui';
+import { Tooltip, Button } from '@douyinfe/semi-ui';
 
 function Demo() {
     return (
-        <div id="tooltip-wrapper" style={{ position: 'relative' }}>
-            <Tooltip
-                position="right"
-                content="Popup will be rendered in element#tooltip-wrapper"
-                trigger="click"
-                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}
-            >
-                <Tag>Click here</Tag>
-            </Tooltip>
+        <>
+            <div>
+                <Tooltip
+                    position='topLeft'
+                    content='semi design tooltip'>
+                    <Button type='secondary' style={{ marginRight: 8 }}>Arrow Point at Center</Button>
+                </Tooltip>
+            </div>
+
+            <div style={{ marginTop: 20 }}>
+                <Tooltip
+                    content='semi design tooltip'
+                    arrowPointAtCenter={false}
+                    position='topLeft'
+                >
+                    <Button type='secondary' style={{ marginRight: 8, width: 120 }}>Edge align</Button>
+                </Tooltip>
+            </div>
+        </>
+    );
+};
+
+```
+
+### Trigger Timing
+
+-   Configure the timing of the trigger display, the default is `hover`, optional `hover` / `focus` / `click` / `custom` . 
+-   When set to `custom`, it needs to be used in conjunction with the `visible`attribute, at which point the display is completely controlled 
+
+```jsx live=true hideInDSM
+import React, { useState } from 'react';
+import { Tooltip, Button, ButtonGroup, Input } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    // Container needs to set position: relative
+    const getPopupContainer = () => document.querySelector('#tooltip-container');
+
+    return (
+        <div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }} id="tooltip-container">
+            <div style={{ width: '150%', height: '150%', paddingLeft: 50, paddingTop: 50 }}>
+                <Tooltip content={'hi bytedance'} getPopupContainer={getPopupContainer}>
+                    <Button style={{ marginBottom: 20 }}>Hover to show</Button>
+                </Tooltip>
+                <br />
+                <Tooltip content={'hi bytedance'} trigger="click" getPopupContainer={getPopupContainer}>
+                    <Button style={{ marginBottom: 20 }}>Click to show</Button>
+                </Tooltip>
+                <br />
+                <Tooltip content={'hi bytedance'} trigger="focus" getPopupContainer={getPopupContainer}>
+                    <Input style={{ width: 150, marginBottom: 20 }} placeholder="Focus to show" />
+                </Tooltip>
+                <br />
+                <Tooltip
+                    content={'hi bytedance'}
+                    trigger="custom"
+                    visible={visible}
+                    getPopupContainer={getPopupContainer}
+                >
+                    <span style={{ display: 'inline-block' }}>
+                        <ButtonGroup>
+                            <Button onClick={() => setVisible(true)}>Controlled show</Button>
+                            <Button onClick={() => setVisible(false)}>Controlled hide</Button>
+                        </ButtonGroup>
+                    </span>
+                </Tooltip>
+            </div>
         </div>
     );
 }
 ```
 
-### Arrow Point at Center
+### Override Style
 
-**Version:** >= 0.34.0
+Configure specific styles for the pop-up layer through the `className` and `style` API, such as overriding the default maxWidth (280px)
 
-Under the condition of **showArrow=true**, you can pass in `arrowPointAtCenter=true` so that the small triangle always points to the center of the element.
+```jsx live=true
+import React from 'react';
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <Tooltip
+            style={{
+                maxWidth: 320,
+            }}
+            className="another-classname"
+            content={'hi semi semi semi semi semi semi semi'}
+        >
+            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
+        </Tooltip>
+    );
+};
+```
+
+### Render to Specified DOM
+
+With `getPopupContainer` the bullet layer will be rendered to the DOM returned by the function.
+
+**It should be noted that:** The returned container, if not `document.body`,**`position` Will be set by default `"relative"`**(Version > = 0.18.0).
 
 ```jsx live=true hideInDSM
 import React from 'react';
 import { Tooltip, Tag } from '@douyinfe/semi-ui';
 
 function Demo() {
-    const tops = [
-        ['topLeft', 'TL'],
-        ['top', 'Top'],
-        ['topRight', 'TR'],
-    ];
-    const lefts = [
-        ['leftTop', 'LT'],
-        ['left', 'Left'],
-        ['leftBottom', 'LB'],
-    ];
-    const rights = [
-        ['rightTop', 'RT'],
-        ['right', 'Right'],
-        ['rightBottom', 'RB'],
-    ];
-    const bottoms = [
-        ['bottomLeft', 'BL'],
-        ['bottom', 'Bottom'],
-        ['bottomRight', 'BR'],
-    ];
-
     return (
-        <div style={{ paddingLeft: 40 }}>
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
-                {tops.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ width: 40, float: 'left' }}>
-                {lefts.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
-                {rights.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
-                {bottoms.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
+        <div id="tooltip-wrapper" style={{ position: 'relative' }}>
+            <Tooltip
+                position="right"
+                content="Popup will be rendered in element#tooltip-wrapper"
+                trigger="click"
+                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}
+            >
+                <Tag>Click here</Tag>
+            </Tooltip>
         </div>
     );
 }
@@ -385,7 +316,7 @@ import React from 'react';
 import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 
 () => (
-    <Popconfirm content="Confirm Delete">
+    <Popconfirm content="Are you sure to delete this comment" title='Confirm Delete'>
         <span style={{ display: 'inline-block' }}>
             <Tooltip content={'Delete Comment'}>
                 <Button type="danger">Delete</Button>
@@ -425,7 +356,7 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 | visible | Whether to show the pop-up layer | boolean |  |  |
 | wrapperClassName | When children are disabled or children are multiple elements, the outer layer will wrap a layer of span elements, and the api is used to set the style class name of this span | string |  | 1.32.0 |
 | wrapperId | The id of the wrapper node of the popup layer. The aria attribute of the trigger points to this id. | string |  | 2.11.0  |
-| zIndex              | Bullet levels.                                                                                                                                                                                                                               | number                      | 1060                |            |
+| zIndex              | Bullet levels.           | number                      | 1060                |            |
 | onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden                                                                                                                                                                               | (isVisible: boolean) => void |                     |            |
 | onClickOutSide      | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)                                                                             | (e:event) => void           |                     | **2.1.0** |
 

content/show/tooltip/index.md

@@ -18,128 +18,60 @@ import { Tooltip } from '@douyinfe/semi-ui';
 
 ### 注意事项
 
-ToolTip 为了计算定位，需要获取到 children 的真实 DOM 元素，因此 ToolTip 类型目前支持如下两种类型的 children
+Tooltip 需要将 DOM 事件监听器应用到 children 中，如果子元素是自定义的组件，你需要确保它能将属性传递至底层的 DOM 元素
 
-1. 真实 dom 节点的 jsx 类型，如 span，div，p...
-2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到真实的 dom 节点上
+同时为了计算弹出层的定位，需要获取到 children 的真实 DOM 元素，因此 Tooltip 支持如下类型的 children
 
-```jsx live=true hideInDSM
-import React, { forwardRef } from 'react';
-import { Tooltip } from '@douyinfe/semi-ui';
-
-function Demo() {
-    const Test = forwardRef((props, ref) => (
-        <span {...props} ref={ref}>
-            Test
-        </span>
-    ));
-    return (
-        <Tooltip content={'hi bytedance'}>
-            <Test />
-        </Tooltip>
-    );
-}
-```
-
-### 基本用法
-
-你可以使用 Tooltip 包裹任何支持 `onClick`/`onMouseEnter`/`onMouseLeave` 的组件。
+1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上
+2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上
+3. 真实 DOM 节点, 如 span，div，p...
 
-当然包裹的组件可能会绑定了自己的 `onClick`/`onMouseEnter`/`onMouseLeave` 等事件，这种情况下你需要为 Tooltip 选择合适的触发时机。
+```jsx live=true noInline=true dir="column"
+import React, { forwardRef } from 'react';
+import { Tooltip, Space } from '@douyinfe/semi-ui';
 
-例如：
+const style={ border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };
 
--   组件已经绑定了 `onClick` 事件，那么 Tooltip 的 `trigger` 参数值最好传 `hover`。
--   组件已经绑定了 `onMouseEnter`/`onMouseLeave` 事件，Tooltip 的 `trigger` 参数值最好传 `click` 。
+// 将props属性传递，绑定ref
+const FCChildren = forwardRef((props, ref) => {
+    return (<span {...props} ref={ref} style={style}>Functional Component</span>);
+});
 
-```jsx live=true hideInDSM
-import React from 'react';
-import { Tooltip, Tag } from '@douyinfe/semi-ui';
+// 将props属性传递
+class MyComponent extends React.Component {
+    render() {
+        return (<span {...this.props} style={style}>ClassComponent</span>);
+    }
+};
 
 function Demo() {
     return (
-        <Tooltip content={'hi bytedance'}>
-            <Tag>悬停此处</Tag>
-        </Tooltip>
-    );
-}
-```
-
-### 触发时机
-
--   配置触发展示的时机，默认为 `hover`，可选 `hover`/`focus`/`click`/`custom`
--   设为 `custom` 时，需要配合 `visible` 属性使用，此时显示与否完全受控
-
-```jsx live=true hideInDSM
-import React, { useState } from 'react';
-import { Tooltip, Button, ButtonGroup, Input } from '@douyinfe/semi-ui';
-
-function Demo() {
-    const [visible, setVisible] = useState(false);
-    // container 需要设置 position: relative
-    const getPopupContainer = () => document.querySelector('#tooltip-container');
-
-    return (
-        <div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }} id="tooltip-container">
-            <div style={{ width: '150%', height: '150%', paddingLeft: 50, paddingTop: 50 }}>
-                <Tooltip content={'hi bytedance'} getPopupContainer={getPopupContainer}>
-                    <Button style={{ marginBottom: 20 }}>悬停显示</Button>
-                </Tooltip>
-                <br />
-                <Tooltip content={'hi bytedance'} trigger="click" getPopupContainer={getPopupContainer}>
-                    <Button style={{ marginBottom: 20 }}>点击显示</Button>
-                </Tooltip>
-                <br />
-                <Tooltip content={'hi bytedance'} trigger="focus" getPopupContainer={getPopupContainer}>
-                    <Input style={{ width: 100, marginBottom: 20 }} placeholder="聚焦显示" />
-                </Tooltip>
-                <br />
-                <Tooltip
-                    content={'hi bytedance'}
-                    trigger="custom"
-                    visible={visible}
-                    getPopupContainer={getPopupContainer}
-                >
-                    <span style={{ display: 'inline-block' }}>
-                        <ButtonGroup>
-                            <Button onClick={() => setVisible(true)}>受控显示</Button>
-                            <Button onClick={() => setVisible(false)}>受控隐藏</Button>
-                        </ButtonGroup>
-                    </span>
-                </Tooltip>
-            </div>
-        </div>
+        <Space>
+            <Tooltip content={'semi design'}>
+                <FCChildren />
+            </Tooltip>
+            <Tooltip content={'semi design'}>
+                <MyComponent />
+            </Tooltip>
+            <Tooltip content={'semi design'}>
+                <span style={style}>DOM</span>
+            </Tooltip>
+        </Space>
     );
 }
-```
-
-### 覆盖特定样式
+render(Demo);
 
-你可以通过 className、style 为弹出层配置特定样式，例如覆盖默认的 maxWidth （280px）
-```jsx live=true
-import React from 'react';
-import { Tooltip, Tag } from '@douyinfe/semi-ui';
-
-() => {
-    return (
-        <Tooltip
-            style={{
-                maxWidth: 320
-            }}
-            className='another-classname'
-            content={'hi semi semi semi semi semi semi semi'}
-        >
-            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
-        </Tooltip>
-    );
-};
 ```
 
 ### 位置
 
-支持弹出层在不同方向展示，共有 12 个方向
+可以通过 position 配置弹出层方向以及对齐位置，position 详细可选值请参考下方 API 文档  
+配置为 `top` 时 向上弹出  
+配置为 `topLeft` 时，向上弹出，且弹出层与 children 左对齐（当arrowPointAtCenter=false时）  
+配置为 `topRight` 时，向上弹出，且弹出层与 children 右对齐（当arrowPointAtCenter=false时）    
+其他方向同理  
 
-```jsx live=true hideInDSM
+```jsx live=true dir="column"
 import React from 'react';
 import { Tooltip, Tag } from '@douyinfe/semi-ui';
 
@@ -166,8 +98,8 @@ function Demo() {
     ];
 
     return (
-        <div style={{ paddingLeft: 40 }}>
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
+        <div>
+            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>
                 {tops.map((pos, index) => (
                     <Tooltip
                         content={
@@ -176,14 +108,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ width: 40, float: 'left' }}>
+            <div style={{ width: 80, float: 'left' }}>
                 {lefts.map((pos, index) => (
                     <Tooltip
                         content={
@@ -192,14 +125,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
+            <div style={{ width: 40, marginLeft: 300 }}>
                 {rights.map((pos, index) => (
                     <Tooltip
                         content={
@@ -208,14 +142,15 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
+            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>
                 {bottoms.map((pos, index) => (
                     <Tooltip
                         content={
@@ -224,10 +159,11 @@ function Demo() {
                                 <p>hi bytedance</p>
                             </article>
                         }
+                        arrowPointAtCenter={false}
                         position={Array.isArray(pos) ? pos[0] : pos}
                         key={index}
                     >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
                     </Tooltip>
                 ))}
             </div>
@@ -235,144 +171,136 @@ function Demo() {
     );
 }
 ```
+### 指向元素中心
 
-### 渲染至指定 DOM
+默认情况下 `arrowPointAtCenter=true`，小三角始终指向 children 元素中心位置。
+你可以将其设置为 false，此时小三角将不再保持指向元素中心。弹出层与 children 边缘对齐
 
-传入 `getPopupContainer`，弹层将会渲染至该函数返回的 DOM 中。
+```jsx live=true
+import React from 'react';
+import { Tooltip, Button } from '@douyinfe/semi-ui';
 
-**需要注意的是：** 返回的容器如果不是 `document.body`，**`position` 需要设为 `"relative"`**（版本 >= 0.18.0）。
+function Demo() {
+    return (
+        <>
+            <div>
+                <Tooltip
+                    position='topLeft'
+                    content='semi design tooltip'>
+                    <Button type='secondary' style={{ marginRight: 8 }}>指向元素中心</Button>
+                </Tooltip>
+            </div>
+
+            <div style={{ marginTop: 20 }}>
+                <Tooltip
+                    content='semi design tooltip'
+                    arrowPointAtCenter={false}
+                    position='topLeft'
+                >
+                    <Button type='secondary' style={{ marginRight: 8, width: 120 }}>边缘对齐</Button>
+                </Tooltip>
+            </div>
+        </>
+    );
+};
+
+```
+### 触发时机
+
+-   配置触发展示的时机，默认为 `hover`，可选 `hover`/`focus`/`click`/`custom`
+-   设为 `custom` 时，需要配合 `visible` 属性使用，此时显示与否完全受控
 
 ```jsx live=true hideInDSM
+import React, { useState } from 'react';
+import { Tooltip, Button, ButtonGroup, Input } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    // container 需要设置 position: relative
+    const getPopupContainer = () => document.querySelector('#tooltip-container');
+
+    return (
+        <div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }} id="tooltip-container">
+            <div style={{ width: '150%', height: '150%', paddingLeft: 50, paddingTop: 50 }}>
+                <Tooltip content={'hi bytedance'} getPopupContainer={getPopupContainer}>
+                    <Button style={{ marginBottom: 20 }}>悬停显示</Button>
+                </Tooltip>
+                <br />
+                <Tooltip content={'hi bytedance'} trigger="click" getPopupContainer={getPopupContainer}>
+                    <Button style={{ marginBottom: 20 }}>点击显示</Button>
+                </Tooltip>
+                <br />
+                <Tooltip content={'hi bytedance'} trigger="focus" getPopupContainer={getPopupContainer}>
+                    <Input style={{ width: 100, marginBottom: 20 }} placeholder="聚焦显示" />
+                </Tooltip>
+                <br />
+                <Tooltip
+                    content={'hi bytedance'}
+                    trigger="custom"
+                    visible={visible}
+                    getPopupContainer={getPopupContainer}
+                >
+                    <span style={{ display: 'inline-block' }}>
+                        <ButtonGroup>
+                            <Button onClick={() => setVisible(true)}>受控显示</Button>
+                            <Button onClick={() => setVisible(false)}>受控隐藏</Button>
+                        </ButtonGroup>
+                    </span>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
+```
+
+### 覆盖特定样式
+
+你可以通过 className、style 为弹出层配置特定样式，例如覆盖默认的 maxWidth （280px）
+```jsx live=true
 import React from 'react';
 import { Tooltip, Tag } from '@douyinfe/semi-ui';
 
-function Demo() {
+() => {
     return (
-        <div id="tooltip-wrapper" style={{ position: 'relative' }}>
+        <div>
             <Tooltip
-                position="right"
-                content="浮层被渲染至#tooltip-wrapper元素中"
-                trigger="click"
-                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}
+                style={{
+                    maxWidth: 320
+                }}
+                className='another-classname'
+                content={'hi semi semi semi semi semi semi semi'}
             >
-                <Tag>点击此处</Tag>
+                <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
             </Tooltip>
         </div>
     );
-}
+};
 ```
+### 渲染至指定 DOM
 
-### 指向元素中心
-
-**版本：**>= 0.34.0
+传入 `getPopupContainer`，弹层将会渲染至该函数返回的 DOM 中。
 
-在**显示小三角**的条件（`showArrow=true`）下，可以传入 `arrowPointAtCenter=true` 使得小三角始终指向元素中心位置。
+**需要注意的是：** 返回的容器如果不是 `document.body`，**`position` 需要设为 `"relative"`**（版本 >= 0.18.0）。
 
 ```jsx live=true hideInDSM
 import React from 'react';
 import { Tooltip, Tag } from '@douyinfe/semi-ui';
 
 function Demo() {
-    const tops = [
-        ['topLeft', 'TL'],
-        ['top', 'Top'],
-        ['topRight', 'TR'],
-    ];
-    const lefts = [
-        ['leftTop', 'LT'],
-        ['left', 'Left'],
-        ['leftBottom', 'LB'],
-    ];
-    const rights = [
-        ['rightTop', 'RT'],
-        ['right', 'Right'],
-        ['rightBottom', 'RB'],
-    ];
-    const bottoms = [
-        ['bottomLeft', 'BL'],
-        ['bottom', 'Bottom'],
-        ['bottomRight', 'BR'],
-    ];
-
     return (
-        <div style={{ paddingLeft: 40 }}>
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
-                {tops.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ width: 40, float: 'left' }}>
-                {lefts.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
-                {rights.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
-                {bottoms.map((pos, index) => (
-                    <Tooltip
-                        showArrow
-                        arrowPointAtCenter
-                        content={
-                            <article>
-                                Hi ByteDancer, this is a tooltip.
-                                <br /> We have 2 lines.
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                    >
-                        <Tag style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
+        <div id="tooltip-wrapper" style={{ position: 'relative' }}>
+            <Tooltip
+                position="right"
+                content="浮层被渲染至#tooltip-wrapper元素中"
+                trigger="click"
+                getPopupContainer={() => document.querySelector('#tooltip-wrapper')}
+            >
+                <Tag>点击此处</Tag>
+            </Tooltip>
         </div>
     );
 }
 ```
-
 ### 搭配 Popover 或 Popconfirm 使用
 
 Tooltip、Popconfirm、Popover 都需要劫持 children 的相关事件（onMouseEnter/onMouseLeave/onClick....），用于配置 trigger。  
@@ -384,7 +312,7 @@ import React from 'react';
 import { Tooltip, Popconfirm, Button } from '@douyinfe/semi-ui';
 
 () => (
-    <Popconfirm content="是否确认删除">
+    <Popconfirm content="是否确认删除" title='确认' style={{ width: 320 }}>
         <span style={{ display: 'inline-block' }}>
             <Tooltip content={'删除评价'}>
                 <Button type="danger">删除</Button>
@@ -415,6 +343,7 @@ function Demo() {
                 是一个很长很长很长很长的链接
             </Text>
             <br />
+            <br />
             <Paragraph
                 ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }}
                 style={{ width: 300 }}
@@ -441,7 +370,7 @@ function Demo() {
 | clickToHide | 点击弹出层及内部任一元素时是否自动关闭弹层 | boolean | false | **0.24.0** |
 | disableFocusListener | trigger为`hover`时，不响应键盘聚焦弹出浮层事件，详见[issue#977](https://github.com/DouyinFE/semi-design/issues/977) | boolean | false | **2.17.0** |
 | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | function():HTMLElement | () => document.body |  |
-| margin | 计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549) | number ｜ { marginLeft: number; marginTop: number; marginRight: number; marginBottom: number } | 0 |  **2.23.0**|
+| margin | 计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549) | number ｜ <ApiType detail='{ marginLeft: number; marginTop: number; marginRight: number; marginBottom: number }'>MarginObject</ApiType> | 0 |  **2.23.0**|
 | mouseEnterDelay | 鼠标移入后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
 | mouseLeaveDelay | 鼠标移出后，延迟消失的时间，单位毫秒（仅当 trigger 为 hove/focus 时生效），不小于 mouseEnterDelay | number | 50 |  |
 | motion | 是否展示弹出层动画 | boolean | true |  |
@@ -495,7 +424,8 @@ function Demo() {
 ## FAQ
 
 -   **为什么 Tooltip content 配置很长很长的内容时，会超出显示 / 不默认配置 word-break 样式?**  
-    不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。否则效果往往会适得其反，使用方可以根据自己当前语言需求，使用 CSS 进行设置。
+    不同语言内容（纯英文、中文、中英文混合、其他语种混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。使用方可以根据自己当前语言需求，使用 CSS 进行设置。
+
 
 <!-- ## 相关物料