demo: improve popconfirm/popover/tootlip placement demo code style (#45581)

.dumi/theme/common/styles/Demo.tsx

@@ -40,6 +40,9 @@ const GlobalDemoStyles: React.FC = () => {
           .code-box-demo {
             background-color: ${token.colorBgContainer};
             border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
+            > .demo {
+              overflow: auto;
+            }
           }
 
           .markdown {

components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -538,12 +538,15 @@ Array [
 exports[`renders components/popconfirm/demo/locale.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="demo"
+>
   <div
-    style="margin-left: 70px; white-space: nowrap;"
+    style="margin-inline-start: 80px; white-space: nowrap;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -617,6 +620,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -625,6 +629,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -639,6 +644,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -712,6 +718,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -720,6 +727,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -734,6 +742,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -807,6 +816,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -815,6 +825,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -827,12 +838,13 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    style="width: 70px; float: left;"
+    style="width: 80px; float: inline-start;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -906,6 +918,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -914,6 +927,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -928,6 +942,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1001,6 +1016,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1009,6 +1025,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1023,6 +1040,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1096,6 +1114,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1104,6 +1123,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1116,12 +1136,13 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    style="width: 70px; margin-left: 304px;"
+    style="width: 80px; margin-inline-start: 344px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1195,6 +1216,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1203,6 +1225,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1217,6 +1240,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1290,6 +1314,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1298,6 +1323,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1312,6 +1338,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1385,6 +1412,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1393,6 +1421,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1405,12 +1434,13 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    style="margin-left: 70px; clear: both; white-space: nowrap;"
+    style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1484,6 +1514,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1492,6 +1523,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1506,6 +1538,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1579,6 +1612,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1587,6 +1621,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1601,6 +1636,7 @@ Array [
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1674,6 +1710,7 @@ Array [
               >
                 <button
                   class="ant-btn ant-btn-default ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1682,6 +1719,7 @@ Array [
                 </button>
                 <button
                   class="ant-btn ant-btn-primary ant-btn-sm"
+                  style="width: 80px; margin: 4px;"
                   type="button"
                 >
                   <span>
@@ -1694,8 +1732,8 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders components/popconfirm/demo/placement.tsx extend context correctly 2`] = `[]`;

components/popconfirm/__tests__/__snapshots__/demo.test.tsx.snap

@@ -81,12 +81,15 @@ exports[`renders components/popconfirm/demo/locale.tsx correctly 1`] = `
 `;
 
 exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
-Array [
+<div
+  class="demo"
+>
   <div
-    style="margin-left:70px;white-space:nowrap"
+    style="margin-inline-start:80px;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -95,6 +98,7 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -103,18 +107,20 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
         TR
       </span>
     </button>
-  </div>,
+  </div>
   <div
-    style="width:70px;float:left"
+    style="width:80px;float:inline-start"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -123,6 +129,7 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -131,18 +138,20 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
         LB
       </span>
     </button>
-  </div>,
+  </div>
   <div
-    style="width:70px;margin-left:304px"
+    style="width:80px;margin-inline-start:344px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -151,6 +160,7 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -159,18 +169,20 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
         RB
       </span>
     </button>
-  </div>,
+  </div>
   <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
+    style="margin-inline-start:80px;clear:both;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -179,6 +191,7 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -187,14 +200,15 @@ Array [
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
         BR
       </span>
     </button>
-  </div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders components/popconfirm/demo/promise.tsx correctly 1`] = `

components/popconfirm/demo/placement.tsx

@@ -1,144 +1,135 @@
 import React from 'react';
-import { Button, message, Popconfirm } from 'antd';
+import { Button, Popconfirm, ConfigProvider } from 'antd';
 
 const text = 'Are you sure to delete this task?';
 const description = 'Delete the task';
-
+const buttonWidth = 80;
-const confirm = () => {
-  message.info('Clicked on Yes.');
-};
 
 const App: React.FC = () => (
-  <>
+  <ConfigProvider
-    <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
+    button={{
-      <Popconfirm
+      style: { width: buttonWidth, margin: 4 },
-        placement="topLeft"
+    }}
-        title={text}
+  >
-        description={description}
+    <div className="demo">
-        onConfirm={confirm}
+      <div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
-        okText="Yes"
+        <Popconfirm
-        cancelText="No"
+          placement="topLeft"
-      >
+          title={text}
-        <Button>TL</Button>
+          description={description}
-      </Popconfirm>
+          okText="Yes"
-      <Popconfirm
+          cancelText="No"
-        placement="top"
+        >
-        title={text}
+          <Button>TL</Button>
-        description={description}
+        </Popconfirm>
-        onConfirm={confirm}
+        <Popconfirm
-        okText="Yes"
+          placement="top"
-        cancelText="No"
+          title={text}
-      >
+          description={description}
-        <Button>Top</Button>
+          okText="Yes"
-      </Popconfirm>
+          cancelText="No"
-      <Popconfirm
+        >
-        placement="topRight"
+          <Button>Top</Button>
-        title={text}
+        </Popconfirm>
-        description={description}
+        <Popconfirm
-        onConfirm={confirm}
+          placement="topRight"
-        okText="Yes"
+          title={text}
-        cancelText="No"
+          description={description}
-      >
+          okText="Yes"
-        <Button>TR</Button>
+          cancelText="No"
-      </Popconfirm>
+        >
+          <Button>TR</Button>
+        </Popconfirm>
+      </div>
+      <div style={{ width: buttonWidth, float: 'inline-start' }}>
+        <Popconfirm
+          placement="leftTop"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>LT</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="left"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>Left</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="leftBottom"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>LB</Button>
+        </Popconfirm>
+      </div>
+      <div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
+        <Popconfirm
+          placement="rightTop"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>RT</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="right"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>Right</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="rightBottom"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>RB</Button>
+        </Popconfirm>
+      </div>
+      <div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+        <Popconfirm
+          placement="bottomLeft"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>BL</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="bottom"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>Bottom</Button>
+        </Popconfirm>
+        <Popconfirm
+          placement="bottomRight"
+          title={text}
+          description={description}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>BR</Button>
+        </Popconfirm>
+      </div>
     </div>
-    <div style={{ width: 70, float: 'left' }}>
+  </ConfigProvider>
-      <Popconfirm
-        placement="leftTop"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>LT</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="left"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>Left</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="leftBottom"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>LB</Button>
-      </Popconfirm>
-    </div>
-    <div style={{ width: 70, marginLeft: 304 }}>
-      <Popconfirm
-        placement="rightTop"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>RT</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="right"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>Right</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="rightBottom"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>RB</Button>
-      </Popconfirm>
-    </div>
-    <div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
-      <Popconfirm
-        placement="bottomLeft"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>BL</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="bottom"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>Bottom</Button>
-      </Popconfirm>
-      <Popconfirm
-        placement="bottomRight"
-        title={text}
-        description={description}
-        onConfirm={confirm}
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>BR</Button>
-      </Popconfirm>
-    </div>
-  </>
 );
 
 export default App;

components/popover/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
-<div
+Array [
-  class="demo"
->
   <div
     class="ant-segmented"
+    style="margin-bottom:24px"
   >
     <div
       class="ant-segmented-group"
@@ -54,130 +53,136 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
         </div>
       </label>
     </div>
-  </div>
+  </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    class="demo"
-    role="separator"
   >
-    <span
+    <div
-      class="ant-divider-inner-text"
+      style="margin-inline-start:84px;white-space:nowrap"
     >
-      Content
+      <button
-    </span>
+        class="ant-btn ant-btn-default"
-  </div>
+        style="width:80px;margin:4px"
-  <div
+        type="button"
-    style="margin-left:70px;white-space:nowrap"
+      >
-  >
+        <span>
-    <button
+          TL
-      class="ant-btn ant-btn-default"
+        </span>
-      type="button"
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          Top
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          TR
+        </span>
+      </button>
+    </div>
+    <div
+      style="width:80px;float:inline-start"
     >
-      <span>
+      <button
-        TL
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px;margin:4px"
-    </button>
+        type="button"
-    <button
+      >
-      class="ant-btn ant-btn-default"
+        <span>
-      type="button"
+          LT
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          Left
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          LB
+        </span>
+      </button>
+    </div>
+    <div
+      style="width:80px;margin-inline-start:344px"
     >
-      <span>
+      <button
-        Top
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px;margin:4px"
-    </button>
+        type="button"
-    <button
+      >
-      class="ant-btn ant-btn-default"
+        <span>
-      type="button"
+          RT
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          Right
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px;margin:4px"
+        type="button"
+      >
+        <span>
+          RB
+        </span>
+      </button>
+    </div>
+    <div
+      style="margin-inline-start:80px;clear:both;white-space:nowrap"
     >
-      <span>
+      <button
-        TR
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px;margin:4px"
-    </button>
+        type="button"
-  </div>
+      >
-  <div
+        <span>
-    style="width:70px;float:left"
+          BL
-  >
+        </span>
-    <button
+      </button>
-      class="ant-btn ant-btn-default"
+      <button
-      type="button"
+        class="ant-btn ant-btn-default"
-    >
+        style="width:80px;margin:4px"
-      <span>
+        type="button"
-        LT
+      >
-      </span>
+        <span>
-    </button>
+          Bottom
-    <button
+        </span>
-      class="ant-btn ant-btn-default"
+      </button>
-      type="button"
+      <button
-    >
+        class="ant-btn ant-btn-default"
-      <span>
+        style="width:80px;margin:4px"
-        Left
+        type="button"
-      </span>
+      >
-    </button>
+        <span>
-    <button
+          BR
-      class="ant-btn ant-btn-default"
+        </span>
-      type="button"
+      </button>
-    >
+    </div>
-      <span>
+  </div>,
-        LB
+]
-      </span>
-    </button>
-  </div>
-  <div
-    style="width:70px;margin-left:304px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RT
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Right
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RB
-      </span>
-    </button>
-  </div>
-  <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        BL
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Bottom
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        BR
-      </span>
-    </button>
-  </div>
-</div>
 `;
 
 exports[`renders components/popover/demo/basic.tsx correctly 1`] = `
@@ -287,12 +292,15 @@ exports[`renders components/popover/demo/hover-with-click.tsx correctly 1`] = `
 `;
 
 exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
-<div>
+<div
+  class="demo"
+>
   <div
-    style="margin-left:70px;white-space:nowrap"
+    style="margin-inline-start:84px;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -301,6 +309,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -309,6 +318,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -317,10 +327,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;float:left"
+    style="width:80px;float:inline-start"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -329,6 +340,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -337,6 +349,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -345,10 +358,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;margin-left:304px"
+    style="width:80px;margin-inline-start:344px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -357,6 +371,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -365,6 +380,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -373,10 +389,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
+    style="margin-inline-start:80px;clear:both;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -385,6 +402,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -393,6 +411,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>

components/popover/demo/arrow.md

@@ -5,23 +5,3 @@
 ## en-US
 
 Hide arrow by `arrow`.
-
-<style>
-.code-box-demo .demo {
-  overflow: auto;
-}
-.code-box-demo .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-.code-box-demo .ant-btn-rtl {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-bottom: 8px;
-}
-#components-popover-demo-arrow .ant-btn {
-  width: 70px;
-  text-align: center;
-  padding: 0;
-}
-</style>

components/popover/demo/arrow.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Button, Divider, Popover, Segmented } from 'antd';
+import { Button, Popover, Segmented, ConfigProvider } from 'antd';
 
 const text = <span>Title</span>;
 const content = (
@@ -9,72 +9,86 @@ const content = (
   </div>
 );
 
-const buttonWidth = 70;
+const buttonWidth = 80;
 
 const App: React.FC = () => {
-  const [showArrow, setShowArrow] = useState(true);
+  const options = ['Show', 'Hide', 'Center'];
-  const [arrowAtCenter, setArrowAtCenter] = useState(false);
+  const [arrow, setArrow] = useState('Show');
 
   const mergedArrow = useMemo(() => {
-    if (arrowAtCenter) return { pointAtCenter: true };
+    if (arrow === 'Hide') {
-    return showArrow;
+      return false;
-  }, [showArrow, arrowAtCenter]);
+    }
+
+    if (arrow === 'Show') {
+      return true;
+    }
+
+    return {
+      pointAtCenter: true,
+    };
+  }, [arrow]);
 
   return (
-    <div className="demo">
+    <ConfigProvider
+      button={{
+        style: { width: buttonWidth, margin: 4 },
+      }}
+    >
       <Segmented
-        options={['Show', 'Hide', 'Center']}
+        options={options}
-        onChange={(val) => {
+        onChange={(val: string) => {
-          setShowArrow(val !== 'Hide');
+          setArrow(val);
-          setArrowAtCenter(val === 'Center');
         }}
+        style={{ marginBottom: 24 }}
       />
-      <Divider orientation="center">Content</Divider>
+      <div className="demo">
-      <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
+        <div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
-        <Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
+          <Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
-          <Button>TL</Button>
+            <Button>TL</Button>
-        </Popover>
+          </Popover>
-        <Popover placement="top" title={text} content={content} arrow={mergedArrow}>
+          <Popover placement="top" title={text} content={content} arrow={mergedArrow}>
-          <Button>Top</Button>
+            <Button>Top</Button>
-        </Popover>
+          </Popover>
-        <Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
+          <Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
-          <Button>TR</Button>
+            <Button>TR</Button>
-        </Popover>
+          </Popover>
+        </div>
+        <div style={{ width: buttonWidth, float: 'inline-start' }}>
+          <Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
+            <Button>LT</Button>
+          </Popover>
+          <Popover placement="left" title={text} content={content} arrow={mergedArrow}>
+            <Button>Left</Button>
+          </Popover>
+          <Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
+            <Button>LB</Button>
+          </Popover>
+        </div>
+        <div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
+          <Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
+            <Button>RT</Button>
+          </Popover>
+          <Popover placement="right" title={text} content={content} arrow={mergedArrow}>
+            <Button>Right</Button>
+          </Popover>
+          <Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
+            <Button>RB</Button>
+          </Popover>
+        </div>
+        <div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+          <Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
+            <Button>BL</Button>
+          </Popover>
+          <Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
+            <Button>Bottom</Button>
+          </Popover>
+          <Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
+            <Button>BR</Button>
+          </Popover>
+        </div>
       </div>
-      <div style={{ width: buttonWidth, float: 'left' }}>
+    </ConfigProvider>
-        <Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
-          <Button>LT</Button>
-        </Popover>
-        <Popover placement="left" title={text} content={content} arrow={mergedArrow}>
-          <Button>Left</Button>
-        </Popover>
-        <Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
-          <Button>LB</Button>
-        </Popover>
-      </div>
-      <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
-        <Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
-          <Button>RT</Button>
-        </Popover>
-        <Popover placement="right" title={text} content={content} arrow={mergedArrow}>
-          <Button>Right</Button>
-        </Popover>
-        <Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
-          <Button>RB</Button>
-        </Popover>
-      </div>
-      <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
-        <Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
-          <Button>BL</Button>
-        </Popover>
-        <Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
-          <Button>Bottom</Button>
-        </Popover>
-        <Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
-          <Button>BR</Button>
-        </Popover>
-      </div>
-    </div>
   );
 };
 

components/popover/demo/placement.md

@@ -5,18 +5,3 @@
 ## en-US
 
 There are 12 `placement` options available.
-
-<style>
-#components-popover-demo-placement .ant-btn {
-  margin-left: 0;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  width: 70px;
-  text-align: center;
-  padding: 0;
-}
-#components-popover-demo-placement .ant-btn {
-  margin-left: 8px;
-  margin-right: 0;
-}
-</style>

components/popover/demo/placement.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Popover } from 'antd';
+import { Button, Popover, ConfigProvider } from 'antd';
 
 const text = <span>Title</span>;
 
@@ -10,55 +10,61 @@ const content = (
   </div>
 );
 
-const buttonWidth = 70;
+const buttonWidth = 80;
 
 const App: React.FC = () => (
-  <div>
+  <ConfigProvider
-    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
+    button={{
-      <Popover placement="topLeft" title={text} content={content} trigger="click">
+      style: { width: buttonWidth, margin: 4 },
-        <Button>TL</Button>
+    }}
-      </Popover>
+  >
-      <Popover placement="top" title={text} content={content} trigger="click">
+    <div className="demo">
-        <Button>Top</Button>
+      <div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
-      </Popover>
+        <Popover placement="topLeft" title={text} content={content} trigger="click">
-      <Popover placement="topRight" title={text} content={content} trigger="click">
+          <Button>TL</Button>
-        <Button>TR</Button>
+        </Popover>
-      </Popover>
+        <Popover placement="top" title={text} content={content} trigger="click">
+          <Button>Top</Button>
+        </Popover>
+        <Popover placement="topRight" title={text} content={content} trigger="click">
+          <Button>TR</Button>
+        </Popover>
+      </div>
+      <div style={{ width: buttonWidth, float: 'inline-start' }}>
+        <Popover placement="leftTop" title={text} content={content} trigger="click">
+          <Button>LT</Button>
+        </Popover>
+        <Popover placement="left" title={text} content={content} trigger="click">
+          <Button>Left</Button>
+        </Popover>
+        <Popover placement="leftBottom" title={text} content={content} trigger="click">
+          <Button>LB</Button>
+        </Popover>
+      </div>
+      <div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
+        <Popover placement="rightTop" title={text} content={content} trigger="click">
+          <Button>RT</Button>
+        </Popover>
+        <Popover placement="right" title={text} content={content} trigger="click">
+          <Button>Right</Button>
+        </Popover>
+        <Popover placement="rightBottom" title={text} content={content} trigger="click">
+          <Button>RB</Button>
+        </Popover>
+      </div>
+      <div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+        <Popover placement="bottomLeft" title={text} content={content} trigger="click">
+          <Button>BL</Button>
+        </Popover>
+        <Popover placement="bottom" title={text} content={content} trigger="click">
+          <Button>Bottom</Button>
+        </Popover>
+        <Popover placement="bottomRight" title={text} content={content} trigger="click">
+          <Button>BR</Button>
+        </Popover>
+      </div>
     </div>
-    <div style={{ width: buttonWidth, float: 'left' }}>
+  </ConfigProvider>
-      <Popover placement="leftTop" title={text} content={content} trigger="click">
-        <Button>LT</Button>
-      </Popover>
-      <Popover placement="left" title={text} content={content} trigger="click">
-        <Button>Left</Button>
-      </Popover>
-      <Popover placement="leftBottom" title={text} content={content} trigger="click">
-        <Button>LB</Button>
-      </Popover>
-    </div>
-    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
-      <Popover placement="rightTop" title={text} content={content} trigger="click">
-        <Button>RT</Button>
-      </Popover>
-      <Popover placement="right" title={text} content={content} trigger="click">
-        <Button>Right</Button>
-      </Popover>
-      <Popover placement="rightBottom" title={text} content={content} trigger="click">
-        <Button>RB</Button>
-      </Popover>
-    </div>
-    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
-      <Popover placement="bottomLeft" title={text} content={content} trigger="click">
-        <Button>BL</Button>
-      </Popover>
-      <Popover placement="bottom" title={text} content={content} trigger="click">
-        <Button>Bottom</Button>
-      </Popover>
-      <Popover placement="bottomRight" title={text} content={content} trigger="click">
-        <Button>BR</Button>
-      </Popover>
-    </div>
-  </div>
 );
 
 export default App;

components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="demo"
->
   <div
     class="ant-segmented"
+    style="margin-bottom: 24px;"
   >
     <div
       class="ant-segmented-group"
@@ -54,388 +53,388 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
         </div>
       </label>
     </div>
-  </div>
+  </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    class="demo"
-    role="separator"
   >
-    <span
-      class="ant-divider-inner-text"
-    >
-      Content
-    </span>
-  </div>
-  <div
-    style="margin-left: 78px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        TL
-      </span>
-    </button>
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topLeft"
+      style="margin-inline-start: 80px; white-space: nowrap;"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          TL
+        </span>
+      </button>
       <div
-        class="ant-tooltip-arrow"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topLeft"
-        style="position: absolute;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      />
-      <div
-        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-inner"
+          class="ant-tooltip-arrow"
-          role="tooltip"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          <span>
+          <div
-            prompt text
+            class="ant-tooltip-inner"
-          </span>
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          Top
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          TR
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topRight"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
         </div>
       </div>
     </div>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        Top
-      </span>
-    </button>
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+      style="width: 80px; float: inline-start;"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          LT
+        </span>
+      </button>
       <div
-        class="ant-tooltip-arrow"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
-        style="position: absolute; bottom: 0px; left: 0px;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      />
-      <div
-        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-inner"
+          class="ant-tooltip-arrow"
-          role="tooltip"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          <span>
+          <div
-            prompt text
+            class="ant-tooltip-inner"
-          </span>
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          Left
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; right: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          LB
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
         </div>
       </div>
     </div>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        TR
-      </span>
-    </button>
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topRight"
+      style="width: 80px; margin-inline-start: 344px;"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          RT
+        </span>
+      </button>
       <div
-        class="ant-tooltip-arrow"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
-        style="position: absolute;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      />
-      <div
-        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-inner"
+          class="ant-tooltip-arrow"
-          role="tooltip"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          <span>
+          <div
-            prompt text
+            class="ant-tooltip-inner"
-          </span>
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          Right
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          RB
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        LT
-      </span>
-    </button>
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
+      style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          BL
+        </span>
+      </button>
       <div
-        class="ant-tooltip-arrow"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomLeft"
-        style="position: absolute;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      />
-      <div
-        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-inner"
+          class="ant-tooltip-arrow"
-          role="tooltip"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          <span>
+          <div
-            prompt text
+            class="ant-tooltip-inner"
-          </span>
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          Bottom
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottom"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width: 80px;"
+        type="button"
+      >
+        <span>
+          BR
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomRight"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            <span>
+              prompt text
+            </span>
+          </div>
         </div>
       </div>
     </div>
-    <button
+  </div>,
-      class="ant-btn ant-btn-default"
+]
-      type="button"
-    >
-      <span>
-        Left
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; right: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        LB
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RT
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Right
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RB
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    style="margin-left: 78px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        BL
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        Bottom
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottom"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width: 78px;"
-      type="button"
-    >
-      <span>
-        BR
-      </span>
-    </button>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomRight"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          <span>
-            prompt text
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 `;
 
 exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 2`] = `[]`;
@@ -1631,13 +1630,15 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1
 exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="demo"
+>
   <div
-    style="display: flex; margin-left: 78px; white-space: nowrap; column-gap: 8px;"
+    style="margin-inline-start: 80px; white-space: nowrap;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1667,7 +1668,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1697,7 +1698,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1727,11 +1728,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="display: flex; flex-direction: column; width: 78px; float: left; row-gap: 8px;"
+    style="width: 80px; float: inline-start;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1761,7 +1762,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1791,7 +1792,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1821,11 +1822,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="display: flex; flex-direction: column; width: 78px; margin-left: 336px; row-gap: 8px;"
+    style="width: 80px; margin-inline-start: 344px;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1855,7 +1856,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1885,7 +1886,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1915,11 +1916,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="display: flex; margin-left: 78px; clear: both; white-space: nowrap; column-gap: 8px;"
+    style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1949,7 +1950,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>
@@ -1979,7 +1980,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 78px;"
+      style="width: 80px; margin: 4px;"
       type="button"
     >
       <span>

components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
-<div
+Array [
-  class="demo"
->
   <div
     class="ant-segmented"
+    style="margin-bottom:24px"
   >
     <div
       class="ant-segmented-group"
@@ -54,136 +53,136 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
         </div>
       </label>
     </div>
-  </div>
+  </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    class="demo"
-    role="separator"
   >
-    <span
+    <div
-      class="ant-divider-inner-text"
+      style="margin-inline-start:80px;white-space:nowrap"
     >
-      Content
+      <button
-    </span>
+        class="ant-btn ant-btn-default"
-  </div>
+        style="width:80px"
-  <div
+        type="button"
-    style="margin-left:78px;display:flex;flex-wrap:nowrap;column-gap:8px"
+      >
-  >
+        <span>
-    <button
+          TL
-      class="ant-btn ant-btn-default"
+        </span>
-      style="width:78px"
+      </button>
-      type="button"
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          Top
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          TR
+        </span>
+      </button>
+    </div>
+    <div
+      style="width:80px;float:inline-start"
     >
-      <span>
+      <button
-        TL
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px"
-    </button>
+        type="button"
-    <button
+      >
-      class="ant-btn ant-btn-default"
+        <span>
-      style="width:78px"
+          LT
-      type="button"
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          Left
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          LB
+        </span>
+      </button>
+    </div>
+    <div
+      style="width:80px;margin-inline-start:344px"
     >
-      <span>
+      <button
-        Top
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px"
-    </button>
+        type="button"
-    <button
+      >
-      class="ant-btn ant-btn-default"
+        <span>
-      style="width:78px"
+          RT
-      type="button"
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          Right
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        style="width:80px"
+        type="button"
+      >
+        <span>
+          RB
+        </span>
+      </button>
+    </div>
+    <div
+      style="margin-inline-start:80px;clear:both;white-space:nowrap"
     >
-      <span>
+      <button
-        TR
+        class="ant-btn ant-btn-default"
-      </span>
+        style="width:80px"
-    </button>
+        type="button"
-  </div>
+      >
-  <div
+        <span>
-    style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
+          BL
-  >
+        </span>
-    <button
+      </button>
-      class="ant-btn ant-btn-default"
+      <button
-      type="button"
+        class="ant-btn ant-btn-default"
-    >
+        style="width:80px"
-      <span>
+        type="button"
-        LT
+      >
-      </span>
+        <span>
-    </button>
+          Bottom
-    <button
+        </span>
-      class="ant-btn ant-btn-default"
+      </button>
-      type="button"
+      <button
-    >
+        class="ant-btn ant-btn-default"
-      <span>
+        style="width:80px"
-        Left
+        type="button"
-      </span>
+      >
-    </button>
+        <span>
-    <button
+          BR
-      class="ant-btn ant-btn-default"
+        </span>
-      type="button"
+      </button>
-    >
+    </div>
-      <span>
+  </div>,
-        LB
+]
-      </span>
-    </button>
-  </div>
-  <div
-    style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RT
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Right
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        RB
-      </span>
-    </button>
-  </div>
-  <div
-    style="margin-left:78px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      style="width:78px"
-      type="button"
-    >
-      <span>
-        BL
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width:78px"
-      type="button"
-    >
-      <span>
-        Bottom
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-default"
-      style="width:78px"
-      type="button"
-    >
-      <span>
-        BR
-      </span>
-    </button>
-  </div>
-</div>
 `;
 
 exports[`renders components/tooltip/demo/arrow-point-at-center.tsx correctly 1`] = `
@@ -724,13 +723,15 @@ exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
 `;
 
 exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
-<div>
+<div
+  class="demo"
+>
   <div
-    style="display:flex;margin-left:78px;white-space:nowrap;column-gap:8px"
+    style="margin-inline-start:80px;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -739,7 +740,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -748,7 +749,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -757,11 +758,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="display:flex;flex-direction:column;width:78px;float:left;row-gap:8px"
+    style="width:80px;float:inline-start"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -770,7 +771,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -779,7 +780,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -788,11 +789,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="display:flex;flex-direction:column;width:78px;margin-left:336px;row-gap:8px"
+    style="width:80px;margin-inline-start:344px"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -801,7 +802,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -810,7 +811,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -819,11 +820,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="display:flex;margin-left:78px;clear:both;white-space:nowrap;column-gap:8px"
+    style="margin-inline-start:80px;clear:both;white-space:nowrap"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -832,7 +833,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>
@@ -841,7 +842,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:78px"
+      style="width:80px;margin:4px"
       type="button"
     >
       <span>

components/tooltip/demo/arrow.tsx

@@ -1,16 +1,9 @@
 import React, { useMemo, useState } from 'react';
-import { Button, Divider, Segmented, Tooltip } from 'antd';
+import { Button, Segmented, Tooltip, ConfigProvider } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 78;
+const buttonWidth = 80;
-const gap = 8;
-
-const btnProps = {
-  style: {
-    width: buttonWidth,
-  },
-};
 
 const App: React.FC = () => {
   const options = ['Show', 'Hide', 'Center'];
@@ -31,84 +24,66 @@ const App: React.FC = () => {
   }, [arrow]);
 
   return (
-    <div className="demo">
+    <ConfigProvider
+      button={{
+        style: { width: buttonWidth },
+      }}
+    >
       <Segmented
         value={arrow}
         options={options}
         onChange={(val: string) => {
           setArrow(val);
         }}
+        style={{ marginBottom: 24 }}
       />
-      <Divider orientation="center">Content</Divider>
+      <div className="demo">
-      <div style={{ marginLeft: buttonWidth, display: 'flex', flexWrap: 'nowrap', columnGap: gap }}>
+        <div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
-        <Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
+          <Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>TL</Button>
+            <Button>TL</Button>
-        </Tooltip>
+          </Tooltip>
-        <Tooltip placement="top" title={text} arrow={mergedArrow}>
+          <Tooltip placement="top" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>Top</Button>
+            <Button>Top</Button>
-        </Tooltip>
+          </Tooltip>
-        <Tooltip placement="topRight" title={text} arrow={mergedArrow}>
+          <Tooltip placement="topRight" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>TR</Button>
+            <Button>TR</Button>
-        </Tooltip>
+          </Tooltip>
+        </div>
+        <div style={{ width: buttonWidth, float: 'inline-start' }}>
+          <Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
+            <Button>LT</Button>
+          </Tooltip>
+          <Tooltip placement="left" title={text} arrow={mergedArrow}>
+            <Button>Left</Button>
+          </Tooltip>
+          <Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
+            <Button>LB</Button>
+          </Tooltip>
+        </div>
+        <div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
+          <Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
+            <Button>RT</Button>
+          </Tooltip>
+          <Tooltip placement="right" title={text} arrow={mergedArrow}>
+            <Button>Right</Button>
+          </Tooltip>
+          <Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
+            <Button>RB</Button>
+          </Tooltip>
+        </div>
+        <div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+          <Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
+            <Button>BL</Button>
+          </Tooltip>
+          <Tooltip placement="bottom" title={text} arrow={mergedArrow}>
+            <Button>Bottom</Button>
+          </Tooltip>
+          <Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
+            <Button>BR</Button>
+          </Tooltip>
+        </div>
       </div>
-      <div
+    </ConfigProvider>
-        style={{
-          width: buttonWidth,
-          float: 'left',
-          display: 'flex',
-          flexDirection: 'column',
-          rowGap: gap,
-        }}
-      >
-        <Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
-          <Button>LT</Button>
-        </Tooltip>
-        <Tooltip placement="left" title={text} arrow={mergedArrow}>
-          <Button>Left</Button>
-        </Tooltip>
-        <Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
-          <Button>LB</Button>
-        </Tooltip>
-      </div>
-      <div
-        style={{
-          width: buttonWidth,
-          marginLeft: buttonWidth * 4 + 24,
-          display: 'flex',
-          flexDirection: 'column',
-          rowGap: gap,
-        }}
-      >
-        <Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
-          <Button>RT</Button>
-        </Tooltip>
-        <Tooltip placement="right" title={text} arrow={mergedArrow}>
-          <Button>Right</Button>
-        </Tooltip>
-        <Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
-          <Button>RB</Button>
-        </Tooltip>
-      </div>
-      <div
-        style={{
-          marginLeft: buttonWidth,
-          clear: 'both',
-          display: 'flex',
-          flexWrap: 'nowrap',
-          columnGap: gap,
-        }}
-      >
-        <Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>BL</Button>
-        </Tooltip>
-        <Tooltip placement="bottom" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>Bottom</Button>
-        </Tooltip>
-        <Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
-          <Button {...btnProps}>BR</Button>
-        </Tooltip>
-      </div>
-    </div>
   );
 };
 

components/tooltip/demo/placement.md

@@ -5,18 +5,3 @@
 ## en-US
 
 There are 12 placement options available.
-
-<style>
-#components-tooltip-demo-placement .ant-btn {
-  margin-left: 0;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  width: 70px;
-  text-align: center;
-  padding: 0;
-}
-#components-tooltip-demo-placement .ant-btn {
-  margin-left: 8px;
-  margin-right: 0;
-}
-</style>

components/tooltip/demo/placement.tsx

@@ -1,88 +1,63 @@
 import React from 'react';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, ConfigProvider } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 78;
+const buttonWidth = 80;
-const gap = 8;
-
-const btnProps = {
-  style: {
-    width: buttonWidth,
-  },
-};
 
 const App: React.FC = () => (
-  <div>
+  <ConfigProvider
-    <div style={{ display: 'flex', marginLeft: buttonWidth, whiteSpace: 'nowrap', columnGap: gap }}>
+    button={{
-      <Tooltip placement="topLeft" title={text}>
+      style: { width: buttonWidth, margin: 4 },
-        <Button {...btnProps}>TL</Button>
+    }}
-      </Tooltip>
+  >
-      <Tooltip placement="top" title={text}>
+    <div className="demo">
-        <Button {...btnProps}>Top</Button>
+      <div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
-      </Tooltip>
+        <Tooltip placement="topLeft" title={text}>
-      <Tooltip placement="topRight" title={text}>
+          <Button>TL</Button>
-        <Button {...btnProps}>TR</Button>
+        </Tooltip>
-      </Tooltip>
+        <Tooltip placement="top" title={text}>
+          <Button>Top</Button>
+        </Tooltip>
+        <Tooltip placement="topRight" title={text}>
+          <Button>TR</Button>
+        </Tooltip>
+      </div>
+      <div style={{ width: buttonWidth, float: 'inline-start' }}>
+        <Tooltip placement="leftTop" title={text}>
+          <Button>LT</Button>
+        </Tooltip>
+        <Tooltip placement="left" title={text}>
+          <Button>Left</Button>
+        </Tooltip>
+        <Tooltip placement="leftBottom" title={text}>
+          <Button>LB</Button>
+        </Tooltip>
+      </div>
+      <div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
+        <Tooltip placement="rightTop" title={text}>
+          <Button>RT</Button>
+        </Tooltip>
+        <Tooltip placement="right" title={text}>
+          <Button>Right</Button>
+        </Tooltip>
+        <Tooltip placement="rightBottom" title={text}>
+          <Button>RB</Button>
+        </Tooltip>
+      </div>
+      <div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+        <Tooltip placement="bottomLeft" title={text}>
+          <Button>BL</Button>
+        </Tooltip>
+        <Tooltip placement="bottom" title={text}>
+          <Button>Bottom</Button>
+        </Tooltip>
+        <Tooltip placement="bottomRight" title={text}>
+          <Button>BR</Button>
+        </Tooltip>
+      </div>
     </div>
-    <div
+  </ConfigProvider>
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: buttonWidth,
-        float: 'left',
-        rowGap: gap,
-      }}
-    >
-      <Tooltip placement="leftTop" title={text}>
-        <Button {...btnProps}>LT</Button>
-      </Tooltip>
-      <Tooltip placement="left" title={text}>
-        <Button {...btnProps}>Left</Button>
-      </Tooltip>
-      <Tooltip placement="leftBottom" title={text}>
-        <Button {...btnProps}>LB</Button>
-      </Tooltip>
-    </div>
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: buttonWidth,
-        marginLeft: buttonWidth * 4 + 24,
-        rowGap: gap,
-      }}
-    >
-      <Tooltip placement="rightTop" title={text}>
-        <Button {...btnProps}>RT</Button>
-      </Tooltip>
-      <Tooltip placement="right" title={text}>
-        <Button {...btnProps}>Right</Button>
-      </Tooltip>
-      <Tooltip placement="rightBottom" title={text}>
-        <Button {...btnProps}>RB</Button>
-      </Tooltip>
-    </div>
-    <div
-      style={{
-        display: 'flex',
-        marginLeft: buttonWidth,
-        clear: 'both',
-        whiteSpace: 'nowrap',
-        columnGap: gap,
-      }}
-    >
-      <Tooltip placement="bottomLeft" title={text}>
-        <Button {...btnProps}>BL</Button>
-      </Tooltip>
-      <Tooltip placement="bottom" title={text}>
-        <Button {...btnProps}>Bottom</Button>
-      </Tooltip>
-      <Tooltip placement="bottomRight" title={text}>
-        <Button {...btnProps}>BR</Button>
-      </Tooltip>
-    </div>
-  </div>
 );
 
 export default App;