update ts-universal-attributes-popup.md (6819)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

 # Popup Control
 
+The popup attribute defines the popup displayed when a component is clicked.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  **NOTE**
+>
+>  This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -13,48 +15,52 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| bindPopup | show: boolean,<br/>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
+| bindPopup | show: boolean,<br>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br>**popup**: parameters of the popup.|
 
 
-- PopupOptions attributes
-    | Name | Type | Mandatory | Default Value | Description |
+- PopupOptions
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | message | string | Yes | - | Content of the popup message. |
-  | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
-  | primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
-  | secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
-  | onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
+  | message | string | Yes| - | Content of the popup message.|
+  | placementOnTop | boolean | No| false | Whether to display the popup above the component. The default value is **false**.|
+  | primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No| - | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
+  | secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No| - | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
+  | onStateChange | (isVisible: boolean) =&gt; void | No| - | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.|
 
 - CustomPopupOptions<sup>8+</sup>
-    | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | builder | () =&gt; any | Yes | - | Builder of the tooltip content. |
-  | placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
-  | maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. |
-  | popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. |
-  | enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
-  | autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
-  | onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
+  | builder | () =&gt; any | Yes| - | Builder of the popup content.|
+  | placement | Placement | No| Placement.Bottom | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.|
+  | maskColor | [ResourceColor](../../ui/ts-types.md) | No| - | Color of the popup mask.|
+  | popupColor | [ResourceColor](../../ui/ts-types.md) | No| - | Color of the popup.|
+  | enableArrow | boolean | No| true | Whether to display an arrow.<br>Since API version 9, if the location set for the arrow is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left** and the popup height is less than the arrow width (32 vp), the arrow will not be displayed.|
+  | autoCancel | boolean | No| true | Whether to automatically close the popup when an operation is performed on the page.|
+  | onStateChange | (isVisible: boolean) =&gt; void | No| - | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.|
 
 - Placement<sup>8+</sup> enums
-    | Name | Description |
+  | Name| Description|
   | -------- | -------- |
-  | Left | The tooltip is on the left of the component. |
-  | Right | The tooltip is on the right of the component. |
-  | Top | The tooltip is on the top of the component. |
-  | Bottom | The tooltip is at the bottom of the component. |
-  | TopLeft | The tooltip is in the upper left corner of the component. |
-  | TopRight | The tooltip is in the upper right corner of the component. |
-  | BottomLeft | The tooltip is in the lower left corner of the component. |
-  | BottomRight | The tooltip is in the lower right corner of the component. |
+  | Left | The popup is on the left of the component, vertically aligned with the component on the left.|
+  | Right | The popup is on the right of the component, vertically aligned with the component on the right.|
+  | Top | The popup is at the top of the component, horizontally aligned with the component at the top.|
+  | Bottom | The popup is at the bottom of the component, horizontally aligned with the component at the bottom.|
+  | TopLeft | The popup is at the top of the component and, since API version 9, aligned with the left of the component.|
+  | TopRight | The popup is at the top of the component and, since API version 9, aligned with the right of the component.|
+  | BottomLeft | The popup is at the bottom of the component and, since API version 9, aligned with the left of the component.|
+  | BottomRight | The popup is at the bottom of the component and, since API version 9, aligned with the right of the component.|
+  | LeftTop<sup>9+</sup> | The popup is on the left of the component and aligned with the top of the component.|
+  | LeftBottom<sup>9+</sup> | The popup is on the left of the component and aligned with the bottom of the component.|
+  | RightTop<sup>9+</sup> | The popup is on the right of the component and aligned with the top of the component.|
+  | RightBottom<sup>9+</sup> | The popup is on the right of the component and aligned with the bottom of the component.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PopupExample {
@@ -65,7 +71,7 @@ struct PopupExample {
   @Builder popupBuilder() {
     Row({ space: 2 }) {
       Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 })
-      Text('Custom Popup').fontSize(12)
+      Text('Custom Popup').fontSize(10)
     }.width(100).height(50).backgroundColor(Color.White)
   }