> 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 |
| 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: () => 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: () => 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) => 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: () => 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: () => 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) => 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 |
| builder | () => 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) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
| builder | () => 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) => 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.|
