docs: update popover popconfirm cautions

content/feedback/popconfirm/index-en-US.md

@@ -18,6 +18,8 @@ import { Popconfirm } from '@douyinfe/semi-ui';
 ```
 ### Basic Usage
 
+`Popconfirm` is based on the `Tooltip` component. Children support the same type as `Tooltip`. For details, please refer to [Tooltip Cautions](/en-US/show/tooltip#Cautions)
+
 ```jsx live=true
 import React from 'react';
 import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';

content/feedback/popconfirm/index.md

@@ -17,6 +17,8 @@ import { Popconfirm } from '@douyinfe/semi-ui';
 
 ### 基本使用
 
+Popconfirm 底层基于 Tooltip 封装，Children 支持类型同 Tooltip，注意事项详情可查阅 [Tooltip注意事项](/zh-CN/show/tooltip#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9)
+
 ```jsx live=true
 import React from 'react';
 import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';

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

@@ -22,6 +22,55 @@ The difference with Tooltip is that users can operate on elements on the floatin
 import { Popover } from '@douyinfe/semi-ui';
 ```
 
+### Cautions
+
+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 
+
+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 
+
+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...  
+
+```jsx live=true noInline=true dir="column"
+import React, { forwardRef } from 'react';
+import { Popover, Space } from '@douyinfe/semi-ui';
+
+const style={ border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };
+
+// 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>);
+});
+
+// Spread the props to the underlying DOM element.
+class MyComponent extends React.Component {
+    render() {
+        return (<span {...this.props} style={style}>ClassComponent</span>);
+    }
+};
+
+const content = (<article style={{ padding: 12 }}> Hi ByteDancer, this is a popover. <br /> We have 2 lines.</article>);
+
+function Demo() {
+    return (
+        <Space>
+            <Popover content={content}>
+                <FCChildren />
+            </Popover>
+            <Popover content={content}>
+                <MyComponent />
+            </Popover>
+            <Popover content={content}>
+                <span style={style}>DOM</span>
+            </Popover>
+        </Space>
+    );
+}
+render(Demo);
+
+```
+
 ### Basic Usage
 
 ```jsx live=true

content/show/popover/index.md

@@ -19,6 +19,56 @@ Popover 气泡卡片是由用户自主打开的临时性浮层卡片，能够承
 
 ```jsx import
 import { Popover } from '@douyinfe/semi-ui';
+```
+
+### 注意事项
+
+Popover 需要将 DOM 事件监听器应用到 children 中，如果子元素是自定义的组件，你需要确保它能将属性传递至底层的 DOM 元素
+
+同时为了计算弹出层的定位，需要获取到 children 的真实 DOM 元素，因此 Tooltip 支持如下类型的 children
+
+1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上
+2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上
+3. 真实 DOM 节点, 如 span，div，p...
+
+```jsx live=true noInline=true dir="column"
+import React, { forwardRef } from 'react';
+import { Popover, Space } from '@douyinfe/semi-ui';
+
+const style={ border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };
+
+// 将props属性传递，绑定ref
+const FCChildren = forwardRef((props, ref) => {
+    return (<span {...props} ref={ref} style={style}>Functional Component</span>);
+});
+
+// 将props属性传递
+class MyComponent extends React.Component {
+    render() {
+        return (<span {...this.props} style={style}>ClassComponent</span>);
+    }
+};
+
+const content = (<article style={{ padding: 12 }}> Hi ByteDancer, this is a popover. <br /> We have 2 lines.</article>);
+
+function Demo() {
+    return (
+        <Space>
+            <Popover content={content}>
+                <FCChildren />
+            </Popover>
+            <Popover content={content}>
+                <MyComponent />
+            </Popover>
+            <Popover content={content}>
+                <span style={style}>DOM</span>
+            </Popover>
+        </Space>
+    );
+}
+render(Demo);
+
+
 ```
 ### 基本使用