@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/popover.md

@@ -0,0 +1,1421 @@
+# Popover
+
+Popup card appearing when hovering or clicking a trigger element.
+
+This is the popover body content. You can place any blocks here.
+
+A popover without a title - just body content.
+
+```yaml
+- id: popover_basic
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Popover Title
+  slots:
+    popover:
+      blocks:
+        - id: popover_basic_content
+          type: Paragraph
+          properties:
+            content: This is the popover body content. You can place any blocks here.
+  blocks:
+    - id: popover_basic_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Hover me
+        color: primary
+        variant: solid
+- id: popover_no_title
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  slots:
+    popover:
+      blocks:
+        - id: popover_no_title_content
+          type: Paragraph
+          properties:
+            content: A popover without a title - just body content.
+  blocks:
+    - id: popover_no_title_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No title
+        color: default
+        variant: outlined
+```
+
+Popover placed at top.
+
+Popover placed at topLeft.
+
+Popover placed at topRight.
+
+Popover placed at left.
+
+Popover placed at right.
+
+Popover placed at bottom (default).
+
+```yaml
+- id: popover_place_row_top
+  type: Box
+  layout:
+    gap: 8
+    justify: center
+  blocks:
+    - id: popover_pl_top
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top
+        placement: top
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_top_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at top.
+      blocks:
+        - id: popover_pl_top_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: top
+            color: primary
+            variant: solid
+            size: small
+    - id: popover_pl_topLeft
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top Left
+        placement: topLeft
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_topLeft_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at topLeft.
+      blocks:
+        - id: popover_pl_topLeft_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: topLeft
+            color: default
+            variant: outlined
+            size: small
+    - id: popover_pl_topRight
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top Right
+        placement: topRight
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_topRight_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at topRight.
+      blocks:
+        - id: popover_pl_topRight_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: topRight
+            color: default
+            variant: outlined
+            size: small
+- id: popover_place_row_sides
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: popover_pl_left
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Left
+        placement: left
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_left_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at left.
+      blocks:
+        - id: popover_pl_left_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: left
+            color: primary
+            variant: solid
+            size: small
+    - id: popover_pl_right
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Right
+        placement: right
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_right_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at right.
+      blocks:
+        - id: popover_pl_right_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: right
+            color: primary
+            variant: outlined
+            size: small
+    - id: popover_pl_bottom
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bottom
+        placement: bottom
+      slots:
+        popover:
+          blocks:
+            - id: popover_pl_bottom_msg
+              type: Paragraph
+              properties:
+                content: Popover placed at bottom (default).
+      blocks:
+        - id: popover_pl_bottom_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: bottom (default)
+            color: default
+            variant: outlined
+            size: small
+```
+
+This popover appears on hover (default).
+
+This popover appears on click. Click outside to close.
+
+This popover appears on focus. Tab to the button or click it.
+
+```yaml
+- id: popover_trig_hover
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Hover Popover
+    trigger: hover
+  slots:
+    popover:
+      blocks:
+        - id: popover_trig_hover_msg
+          type: Paragraph
+          properties:
+            content: This popover appears on hover (default).
+  blocks:
+    - id: popover_trig_hover_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Hover (default)
+        color: primary
+        variant: solid
+- id: popover_trig_click
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Click Popover
+    trigger: click
+  slots:
+    popover:
+      blocks:
+        - id: popover_trig_click_msg
+          type: Paragraph
+          properties:
+            content: This popover appears on click. Click outside to close.
+  blocks:
+    - id: popover_trig_click_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Click me
+        color: primary
+        variant: outlined
+- id: popover_trig_focus
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Focus Popover
+    trigger: focus
+  slots:
+    popover:
+      blocks:
+        - id: popover_trig_focus_msg
+          type: Paragraph
+          properties:
+            content: This popover appears on focus. Tab to the button or click it.
+  blocks:
+    - id: popover_trig_focus_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Focus (tab to me)
+        color: primary
+        variant: dashed
+```
+
+Default background color.
+
+A warm light yellow background.
+
+A cool light blue background.
+
+```yaml
+- id: popover_col_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: popover_col_default
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Default Color
+      slots:
+        popover:
+          blocks:
+            - id: popover_col_default_msg
+              type: Paragraph
+              properties:
+                content: Default background color.
+      blocks:
+        - id: popover_col_default_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default
+            color: default
+            variant: outlined
+            size: small
+    - id: popover_col_yellow
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Light Yellow
+        color: "#fffbe6"
+      slots:
+        popover:
+          blocks:
+            - id: popover_col_yellow_msg
+              type: Paragraph
+              properties:
+                content: A warm light yellow background.
+      blocks:
+        - id: popover_col_yellow_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Light Yellow
+            color: gold
+            variant: outlined
+            size: small
+    - id: popover_col_blue
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Light Blue
+        color: "#e6f4ff"
+      slots:
+        popover:
+          blocks:
+            - id: popover_col_blue_msg
+              type: Paragraph
+              properties:
+                content: A cool light blue background.
+      blocks:
+        - id: popover_col_blue_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Light Blue
+            color: blue
+            variant: outlined
+            size: small
+```
+
+This popover is open by default when the page loads.
+
+```yaml
+- id: popover_defopen
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open by Default
+    defaultOpen: true
+    placement: right
+  slots:
+    popover:
+      blocks:
+        - id: popover_defopen_msg
+          type: Paragraph
+          properties:
+            content: This popover is open by default when the page loads.
+  blocks:
+    - id: popover_defopen_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open by default
+        color: green
+        variant: solid
+```
+
+Repositions automatically near viewport edges (default behavior).
+
+Stays in the specified position even near edges.
+
+```yaml
+- id: popover_adj_on
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Auto Adjust
+    autoAdjustOverflow: true
+    placement: top
+  slots:
+    popover:
+      blocks:
+        - id: popover_adj_on_msg
+          type: Paragraph
+          properties:
+            content: Repositions automatically near viewport edges (default behavior).
+  blocks:
+    - id: popover_adj_on_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Auto adjust (default)
+        color: primary
+        variant: solid
+- id: popover_adj_off
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Fixed Position
+    autoAdjustOverflow: false
+    placement: top
+  slots:
+    popover:
+      blocks:
+        - id: popover_adj_off_msg
+          type: Paragraph
+          properties:
+            content: Stays in the specified position even near edges.
+  blocks:
+    - id: popover_adj_off_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No auto adjust
+        color: default
+        variant: outlined
+```
+
+No delay on enter or leave.
+
+1 second delay before showing.
+
+Stays visible for 2 seconds after mouse leaves.
+
+```yaml
+- id: popover_del_fast
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Instant
+    mouseEnterDelay: 0
+    mouseLeaveDelay: 0
+  slots:
+    popover:
+      blocks:
+        - id: popover_del_fast_msg
+          type: Paragraph
+          properties:
+            content: No delay on enter or leave.
+  blocks:
+    - id: popover_del_fast_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No delay
+        color: primary
+        variant: solid
+- id: popover_del_slow
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Slow Enter
+    mouseEnterDelay: 1
+  slots:
+    popover:
+      blocks:
+        - id: popover_del_slow_msg
+          type: Paragraph
+          properties:
+            content: 1 second delay before showing.
+  blocks:
+    - id: popover_del_slow_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 1s enter delay
+        color: primary
+        variant: outlined
+- id: popover_del_sticky
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Sticky
+    mouseLeaveDelay: 2
+  slots:
+    popover:
+      blocks:
+        - id: popover_del_sticky_msg
+          type: Paragraph
+          properties:
+            content: Stays visible for 2 seconds after mouse leaves.
+  blocks:
+    - id: popover_del_sticky_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 2s leave delay
+        color: primary
+        variant: dashed
+```
+
+This popover has a custom z-index of 2000, useful when layering over modals or drawers.
+
+```yaml
+- id: popover_zindex
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Z-Index
+    zIndex: 2000
+  slots:
+    popover:
+      blocks:
+        - id: popover_zindex_msg
+          type: Paragraph
+          properties:
+            content: This popover has a custom z-index of 2000, useful when layering over
+              modals or drawers.
+  blocks:
+    - id: popover_zindex_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Z-index 2000
+        color: primary
+        variant: solid
+```
+
+Custom inner style with larger border radius and a stronger shadow.
+
+This popover has a fixed width of 400px and extra padding, useful for displaying larger content like forms or details.
+
+```yaml
+- id: popover_overlay_style
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Styled Overlay
+    overlayInnerStyle:
+      borderRadius: 16
+      boxShadow: 0 6px 16px rgba(0, 0, 0, 0.2)
+  slots:
+    popover:
+      blocks:
+        - id: popover_overlay_style_msg
+          type: Paragraph
+          properties:
+            content: Custom inner style with larger border radius and a stronger shadow.
+  blocks:
+    - id: popover_overlay_style_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom overlay style
+        color: primary
+        variant: solid
+- id: popover_overlay_wide
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Wide Popover
+    overlayInnerStyle:
+      width: 400
+      padding: 20
+  slots:
+    popover:
+      blocks:
+        - id: popover_overlay_wide_msg
+          type: Paragraph
+          properties:
+            content: This popover has a fixed width of 400px and extra padding, useful for
+              displaying larger content like forms or details.
+  blocks:
+    - id: popover_overlay_wide_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide overlay
+        color: primary
+        variant: outlined
+```
+
+Opening or closing this popover triggers a DisplayMessage action.
+
+This popover uses SetState to track that it was opened.
+
+```yaml
+- id: popover_event_open
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Event Popover
+    trigger: click
+  events:
+    onOpenChange:
+      - id: popover_event_open_msg
+        type: DisplayMessage
+        params:
+          content: Popover visibility changed!
+          duration: 2
+  slots:
+    popover:
+      blocks:
+        - id: popover_event_open_content
+          type: Paragraph
+          properties:
+            content: Opening or closing this popover triggers a DisplayMessage action.
+  blocks:
+    - id: popover_event_open_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Click to toggle
+        color: primary
+        variant: solid
+        icon: AiOutlineBell
+- id: popover_event_state
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Track State
+    trigger: click
+  events:
+    onOpenChange:
+      - id: popover_event_state_set
+        type: SetState
+        params:
+          popover_was_opened: true
+  slots:
+    popover:
+      blocks:
+        - id: popover_event_state_content
+          type: Paragraph
+          properties:
+            content: This popover uses SetState to track that it was opened.
+  blocks:
+    - id: popover_event_state_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Track open state
+        color: primary
+        variant: outlined
+```
+
+JD
+
+Jane Doe
+
+jane.doe@example.com
+
+```yaml
+- id: popover_rich_profile
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: User Profile
+    trigger: click
+  slots:
+    popover:
+      blocks:
+        - id: popover_rich_profile_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: popover_rich_profile_avatar
+              type: Avatar
+              layout:
+                flex: 0 0 auto
+              properties:
+                content: JD
+                color: blue
+            - id: popover_rich_profile_info
+              type: Box
+              blocks:
+                - id: popover_rich_profile_name
+                  type: Title
+                  properties:
+                    content: Jane Doe
+                    level: 5
+                - id: popover_rich_profile_email
+                  type: Paragraph
+                  properties:
+                    content: jane.doe@example.com
+  blocks:
+    - id: popover_rich_profile_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: View Profile
+        color: primary
+        variant: solid
+        icon: AiOutlineUser
+- id: popover_rich_actions
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Actions
+    trigger: click
+  slots:
+    popover:
+      blocks:
+        - id: popover_rich_actions_col
+          type: Box
+          layout:
+            gap: 4
+            direction: column
+          blocks:
+            - id: popover_rich_act_edit
+              type: Button
+              properties:
+                title: Edit
+                icon: AiOutlineEdit
+                color: primary
+                variant: text
+                block: true
+            - id: popover_rich_act_copy
+              type: Button
+              properties:
+                title: Duplicate
+                icon: AiOutlineCopy
+                color: default
+                variant: text
+                block: true
+            - id: popover_rich_act_del
+              type: Button
+              properties:
+                title: Delete
+                icon: AiOutlineDelete
+                color: danger
+                variant: text
+                block: true
+  blocks:
+    - id: popover_rich_actions_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: More
+        icon: AiOutlineEllipsis
+        color: default
+        variant: outlined
+```
+
+This popover has a wider minimum title width of 300px using the titleMinWidth token.
+
+Custom border radius of 20px for a softer appearance.
+
+Custom elevated background color using the colorBgElevated theme token.
+
+Increased inner padding (24px), custom title padding, and larger title margin bottom.
+
+A visible border under the title using titleBorderBottom, plus innerContentPadding for spacing.
+
+The zIndexPopup theme token sets the popover z-index at the theme level (default 1030).
+
+```yaml
+- id: popover_theme_wide
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Wide Title
+    theme:
+      titleMinWidth: 300
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_wide_msg
+          type: Paragraph
+          properties:
+            content: This popover has a wider minimum title width of 300px using the
+              titleMinWidth token.
+  blocks:
+    - id: popover_theme_wide_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide title (300px)
+        color: primary
+        variant: solid
+- id: popover_theme_radius
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Large Radius
+    theme:
+      borderRadiusLG: 20
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_radius_msg
+          type: Paragraph
+          properties:
+            content: Custom border radius of 20px for a softer appearance.
+  blocks:
+    - id: popover_theme_radius_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Large radius
+        color: primary
+        variant: outlined
+- id: popover_theme_bg
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Background
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_bg_msg
+          type: Paragraph
+          properties:
+            content: Custom elevated background color using the colorBgElevated theme token.
+  blocks:
+    - id: popover_theme_bg_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom background
+        color: primary
+        variant: dashed
+- id: popover_theme_padding
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Extra Padding
+    theme:
+      innerPadding: 24
+      titlePadding: 16px 24px
+      titleMarginBottom: 16
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_padding_msg
+          type: Paragraph
+          properties:
+            content: Increased inner padding (24px), custom title padding, and larger title
+              margin bottom.
+  blocks:
+    - id: popover_theme_padding_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Extra padding
+        color: default
+        variant: outlined
+- id: popover_theme_border
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Title Border
+    theme:
+      titleBorderBottom: 1px solid
+      titleMarginBottom: 12
+      innerContentPadding: 8px 0
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_border_msg
+          type: Paragraph
+          properties:
+            content: A visible border under the title using titleBorderBottom, plus
+              innerContentPadding for spacing.
+  blocks:
+    - id: popover_theme_border_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Title border
+        color: default
+        variant: outlined
+- id: popover_theme_zindex
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Z-Index Token
+    theme:
+      zIndexPopup: 2050
+  slots:
+    popover:
+      blocks:
+        - id: popover_theme_zindex_msg
+          type: Paragraph
+          properties:
+            content: The zIndexPopup theme token sets the popover z-index at the theme level
+              (default 1030).
+  blocks:
+    - id: popover_theme_zindex_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Z-index token
+        color: default
+        variant: dashed
+```
+
+The element CSS key targets the outer Popover wrapper. Here it adds a pointer cursor on the trigger area.
+
+The inner CSS key targets the popover inner container. Here it applies extra shadow and rounded corners.
+
+The title CSS key styles the popover title area with blue text, bold weight, and a bottom border.
+
+The content CSS key targets the popover content area. Here it adds a gray background, padding, and rounded corners.
+
+```yaml
+- id: popover_css_element
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  class:
+    element: cursor-pointer
+  properties:
+    title: Element CSS Key
+    trigger: click
+  slots:
+    popover:
+      blocks:
+        - id: popover_css_element_msg
+          type: Paragraph
+          properties:
+            content: The element CSS key targets the outer Popover wrapper. Here it adds a
+              pointer cursor on the trigger area.
+  blocks:
+    - id: popover_css_element_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Element key
+        color: primary
+        variant: solid
+- id: popover_css_inner
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  class:
+    inner: shadow-xl rounded-xl
+  properties:
+    title: Inner CSS Key
+  slots:
+    popover:
+      blocks:
+        - id: popover_css_inner_msg
+          type: Paragraph
+          properties:
+            content: The inner CSS key targets the popover inner container. Here it applies
+              extra shadow and rounded corners.
+  blocks:
+    - id: popover_css_inner_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Inner key
+        color: primary
+        variant: outlined
+- id: popover_css_title
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  class:
+    title: font-bold text-blue-600 border-b border-border pb-2
+  properties:
+    title: Title CSS Key
+  slots:
+    popover:
+      blocks:
+        - id: popover_css_title_msg
+          type: Paragraph
+          properties:
+            content: The title CSS key styles the popover title area with blue text, bold
+              weight, and a bottom border.
+  blocks:
+    - id: popover_css_title_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Title key
+        color: blue
+        variant: outlined
+- id: popover_css_content
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  class:
+    content: bg-bg-layout p-4 rounded-md
+  properties:
+    title: Content CSS Key
+  slots:
+    popover:
+      blocks:
+        - id: popover_css_content_msg
+          type: Paragraph
+          properties:
+            content: The content CSS key targets the popover content area. Here it adds a
+              gray background, padding, and rounded corners.
+  blocks:
+    - id: popover_css_content_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Content key
+        color: default
+        variant: outlined
+```
+
+SC
+
+Sarah Chen
+
+Sarah Chen
+
+Product Manager
+
+```yaml
+- id: popover_usercard
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    trigger: click
+    overlayInnerStyle:
+      width: 320
+      padding: 0
+  slots:
+    popover:
+      blocks:
+        - id: popover_usercard_header
+          type: Box
+          class: bg-bg-layout p-4 rounded-t-lg
+          layout:
+            gap: 12
+            align: center
+          blocks:
+            - id: popover_usercard_avatar
+              type: Avatar
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineUser
+                size: 48
+                color: "#fff"
+                backgroundColor: "#1677ff"
+            - id: popover_usercard_info
+              type: Box
+              layout:
+                direction: column
+                gap: 2
+              blocks:
+                - id: popover_usercard_name
+                  type: Title
+                  properties:
+                    content: Sarah Chen
+                    level: 5
+                - id: popover_usercard_role
+                  type: Paragraph
+                  properties:
+                    content: Product Manager
+        - id: popover_usercard_details
+          type: Descriptions
+          class: p-4
+          properties:
+            size: small
+            column: 1
+            items:
+              - label: Email
+                value: sarah.chen@company.com
+              - label: Team
+                value: Product
+              - label: Location
+                value: San Francisco, CA
+        - id: popover_usercard_actions_row
+          type: Box
+          class: px-4 pb-4
+          layout:
+            gap: 8
+          blocks:
+            - id: popover_usercard_msg_btn
+              type: Button
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Message
+                icon: AiOutlineMail
+                color: primary
+                variant: solid
+                size: small
+              events:
+                onClick:
+                  - id: popover_usercard_msg_action
+                    type: DisplayMessage
+                    params:
+                      content: Opening chat with Sarah...
+                      duration: 2
+            - id: popover_usercard_profile_btn
+              type: Button
+              layout:
+                flex: 1 1 0
+              properties:
+                title: View Profile
+                icon: AiOutlineUser
+                color: default
+                variant: outlined
+                size: small
+              events:
+                onClick:
+                  - id: popover_usercard_profile_action
+                    type: Link
+                    params:
+                      url: https://example.com/profile
+                      newTab: true
+  blocks:
+    - id: popover_usercard_trigger
+      type: Box
+      layout:
+        gap: 8
+        align: center
+      blocks:
+        - id: popover_usercard_trigger_avatar
+          type: Avatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: SC
+            color: "#fff"
+            backgroundColor: "#1677ff"
+        - id: popover_usercard_trigger_name
+          type: Paragraph
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: Sarah Chen
+```
+
+```yaml
+- id: popover_quickmenu
+  type: Popover
+  layout:
+    flex: 0 0 auto
+  properties:
+    trigger: click
+    placement: bottomRight
+    overlayInnerStyle:
+      width: 200
+      padding: 8
+  events:
+    onOpenChange:
+      - id: popover_quickmenu_state
+        type: SetState
+        params:
+          menu_toggled: true
+  slots:
+    popover:
+      blocks:
+        - id: popover_quickmenu_col
+          type: Box
+          layout:
+            direction: column
+            gap: 2
+          blocks:
+            - id: popover_quickmenu_new
+              type: Button
+              properties:
+                title: New Document
+                icon: AiOutlineFileAdd
+                color: primary
+                variant: text
+                block: true
+              events:
+                onClick:
+                  - id: popover_quickmenu_new_action
+                    type: DisplayMessage
+                    params:
+                      content: Creating new document...
+                      duration: 2
+            - id: popover_quickmenu_upload
+              type: Button
+              properties:
+                title: Upload File
+                icon: AiOutlineUpload
+                color: default
+                variant: text
+                block: true
+              events:
+                onClick:
+                  - id: popover_quickmenu_upload_action
+                    type: DisplayMessage
+                    params:
+                      content: Opening file picker...
+                      duration: 2
+            - id: popover_quickmenu_divider
+              type: Divider
+              properties:
+                dashed: true
+            - id: popover_quickmenu_import
+              type: Button
+              properties:
+                title: Import from URL
+                icon: AiOutlineLink
+                color: default
+                variant: text
+                block: true
+              events:
+                onClick:
+                  - id: popover_quickmenu_import_action
+                    type: DisplayMessage
+                    params:
+                      content: Enter a URL to import...
+                      duration: 2
+            - id: popover_quickmenu_template
+              type: Button
+              properties:
+                title: Use Template
+                icon: AiOutlineAppstore
+                color: default
+                variant: text
+                block: true
+  blocks:
+    - id: popover_quickmenu_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Create New
+        icon: AiOutlinePlus
+        color: primary
+        variant: solid
+```
+
+Monthly Budget
+
+The monthly budget is the maximum amount your team can spend on resources each billing cycle. It resets on the 1st of every month.
+
+You will receive a warning notification when 80% of the budget is used.
+
+```yaml
+- id: popover_help_row
+  type: Box
+  layout:
+    gap: 16
+    align: center
+  blocks:
+    - id: popover_help_label
+      type: Title
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Monthly Budget
+        level: 5
+    - id: popover_help_icon
+      type: Popover
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: About Monthly Budget
+        placement: right
+        overlayInnerStyle:
+          width: 300
+      slots:
+        popover:
+          blocks:
+            - id: popover_help_desc
+              type: Paragraph
+              properties:
+                content: The monthly budget is the maximum amount your team can spend on
+                  resources each billing cycle. It resets on the 1st of every
+                  month.
+            - id: popover_help_note
+              type: Paragraph
+              class: text-text-secondary text-sm
+              properties:
+                content: You will receive a warning notification when 80% of the budget is used.
+            - id: popover_help_link
+              type: Button
+              properties:
+                title: Learn more
+                color: primary
+                variant: link
+                size: small
+              events:
+                onClick:
+                  - id: popover_help_link_action
+                    type: Link
+                    params:
+                      url: https://example.com/docs/budget
+                      newTab: true
+      blocks:
+        - id: popover_help_trigger
+          type: Icon
+          layout:
+            flex: 0 0 auto
+          properties:
+            name: AiOutlineQuestionCircle
+            color: "#8c8c8c"
+            size: 18
+    - id: popover_help_input
+      type: NumberInput
+      layout:
+        flex: 1 1 0
+      properties:
+        label:
+          disabled: true
+        prefix: $
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | string | - | Title of the card. |
+| `color` | string | - | Popover background color. |
+| `defaultOpen` | boolean | `false` | Whether the popover is open by default. |
+| `autoAdjustOverflow` | boolean | `true` | Whether to adjust popup placement automatically when popup is off screen |
+| `placement` | string | `"bottom"` | Placement of the popover. Enum: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight`. |
+| `trigger` | string | `"hover"` | Trigger mode which executes the popover. Enum: `hover`, `click`, `focus`. |
+| `zIndex` | number | - | Z-index of the popover. |
+| `overlayInnerStyle` | object | - | Style of overlay inner div. |
+| `mouseEnterDelay` | number | `0.1` | Delay in milliseconds, before tooltip is shown on mouse enter. |
+| `mouseLeaveDelay` | number | `0.1` | Delay in milliseconds, before tooltip is hidden on mouse leave. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design popover tokens](https://ant.design/components/popover#design-token). |
+| `theme.titleMinWidth` | number \| string | `177` | Minimum width of the popover when it has a title. |
+| `theme.zIndexPopup` | number | `1030` | Z-index of the popover. |
+| `theme.innerPadding` | number \| string | `12` | Padding inside the popover content area. |
+| `theme.titlePadding` | number \| string | - | Padding of the title area. |
+| `theme.titleMarginBottom` | number | `8` | Margin bottom of the title. |
+| `theme.titleBorderBottom` | string | `"none"` | Border bottom of the title area. |
+| `theme.innerContentPadding` | number \| string | `0` | Padding of the inner content area. |
+| `theme.colorBgElevated` | string | - | Background color of the popover. |
+| `theme.borderRadiusLG` | number | `8` | Border radius of the popover container. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onOpenChange` | \- | Trigger actions when visibility of the tooltip card is changed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Popover element. |
+| `/inner` | The Popover inner. |
+| `/title` | The Popover title. |
+| `/content` | The Popover content. |
+
+| Slot | Description |
+| --- | --- |
+| `content` | Blocks that trigger the Popover. |
+| `popover` | Blocks inside the popup. |