@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/tooltip.md

@@ -0,0 +1,1274 @@
+# Tooltip
+
+Tooltip popup appearing on hover or focus.
+
+```yaml
+- id: tooltip_basic
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This is a tooltip
+  blocks:
+    - id: tooltip_basic_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Hover me
+        color: primary
+        variant: solid
+- id: tooltip_html
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: <b>Bold</b> and <em>italic</em> text
+  blocks:
+    - id: tooltip_html_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: HTML content
+        color: primary
+        variant: outlined
+- id: tooltip_long
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This is a longer tooltip message that demonstrates how the tooltip wraps
+      text when the content exceeds the default maximum width.
+  blocks:
+    - id: tooltip_long_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Long text
+        color: default
+        variant: outlined
+```
+
+**Top placements:**
+
+**Bottom placements:**
+
+**Left placements:**
+
+**Right placements:**
+
+```yaml
+- id: tooltip_placement_label_top
+  type: Markdown
+  properties:
+    content: "**Top placements:**"
+- id: tooltip_placement_top_row
+  type: Box
+  layout:
+    gap: 8
+    justify: center
+  blocks:
+    - id: tooltip_topLeft
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: topLeft
+        placement: topLeft
+      blocks:
+        - id: tooltip_topLeft_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: topLeft
+            color: default
+            variant: outlined
+            size: small
+    - id: tooltip_top
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: top
+        placement: top
+      blocks:
+        - id: tooltip_top_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: top
+            color: primary
+            variant: solid
+            size: small
+    - id: tooltip_topRight
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: topRight
+        placement: topRight
+      blocks:
+        - id: tooltip_topRight_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: topRight
+            color: default
+            variant: outlined
+            size: small
+- id: tooltip_placement_label_bottom
+  type: Markdown
+  properties:
+    content: "**Bottom placements:**"
+- id: tooltip_placement_bottom_row
+  type: Box
+  layout:
+    gap: 8
+    justify: center
+  blocks:
+    - id: tooltip_bottomLeft
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: bottomLeft
+        placement: bottomLeft
+      blocks:
+        - id: tooltip_bottomLeft_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: bottomLeft
+            color: default
+            variant: outlined
+            size: small
+    - id: tooltip_bottom
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: bottom
+        placement: bottom
+      blocks:
+        - id: tooltip_bottom_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: bottom
+            color: primary
+            variant: solid
+            size: small
+    - id: tooltip_bottomRight
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: bottomRight
+        placement: bottomRight
+      blocks:
+        - id: tooltip_bottomRight_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: bottomRight
+            color: default
+            variant: outlined
+            size: small
+- id: tooltip_placement_label_left
+  type: Markdown
+  properties:
+    content: "**Left placements:**"
+- id: tooltip_placement_left_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: tooltip_left
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: left
+        placement: left
+      blocks:
+        - id: tooltip_left_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: left
+            color: primary
+            variant: solid
+            size: small
+    - id: tooltip_leftTop
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: leftTop
+        placement: leftTop
+      blocks:
+        - id: tooltip_leftTop_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: leftTop
+            color: default
+            variant: outlined
+            size: small
+    - id: tooltip_leftBottom
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: leftBottom
+        placement: leftBottom
+      blocks:
+        - id: tooltip_leftBottom_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: leftBottom
+            color: default
+            variant: outlined
+            size: small
+- id: tooltip_placement_label_right
+  type: Markdown
+  properties:
+    content: "**Right placements:**"
+- id: tooltip_placement_right_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: tooltip_right
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: right
+        placement: right
+      blocks:
+        - id: tooltip_right_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: right
+            color: primary
+            variant: solid
+            size: small
+    - id: tooltip_rightTop
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: rightTop
+        placement: rightTop
+      blocks:
+        - id: tooltip_rightTop_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: rightTop
+            color: default
+            variant: outlined
+            size: small
+    - id: tooltip_rightBottom
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: rightBottom
+        placement: rightBottom
+      blocks:
+        - id: tooltip_rightBottom_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: rightBottom
+            color: default
+            variant: outlined
+            size: small
+```
+
+```yaml
+- id: tooltip_trigger_hover
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Triggered by hover
+    trigger: hover
+  blocks:
+    - id: tooltip_trigger_hover_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Hover (default)
+        color: primary
+        variant: solid
+- id: tooltip_trigger_click
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Triggered by click
+    trigger: click
+  blocks:
+    - id: tooltip_trigger_click_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Click
+        color: primary
+        variant: outlined
+- id: tooltip_trigger_focus
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Triggered by focus
+    trigger: focus
+  blocks:
+    - id: tooltip_trigger_focus_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Focus (tab to me)
+        color: primary
+        variant: dashed
+```
+
+```yaml
+- id: tooltip_color_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: tooltip_color_blue
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: blue
+        color: blue
+      blocks:
+        - id: tooltip_color_blue_tag
+          type: Tag
+          properties:
+            title: blue
+            color: blue
+    - id: tooltip_color_purple
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: purple
+        color: purple
+      blocks:
+        - id: tooltip_color_purple_tag
+          type: Tag
+          properties:
+            title: purple
+            color: purple
+    - id: tooltip_color_cyan
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: cyan
+        color: cyan
+      blocks:
+        - id: tooltip_color_cyan_tag
+          type: Tag
+          properties:
+            title: cyan
+            color: cyan
+    - id: tooltip_color_green
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: green
+        color: green
+      blocks:
+        - id: tooltip_color_green_tag
+          type: Tag
+          properties:
+            title: green
+            color: green
+    - id: tooltip_color_red
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: red
+        color: red
+      blocks:
+        - id: tooltip_color_red_tag
+          type: Tag
+          properties:
+            title: red
+            color: red
+- id: tooltip_color_custom_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: tooltip_color_hex1
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: "Custom color: #ff6b6b"
+        color: "#ff6b6b"
+      blocks:
+        - id: tooltip_color_hex1_tag
+          type: Tag
+          properties:
+            title: "#ff6b6b"
+    - id: tooltip_color_hex2
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: "Custom color: #20c997"
+        color: "#20c997"
+      blocks:
+        - id: tooltip_color_hex2_tag
+          type: Tag
+          properties:
+            title: "#20c997"
+    - id: tooltip_color_hex3
+      type: Tooltip
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: "Custom color: #4c6ef5"
+        color: "#4c6ef5"
+      blocks:
+        - id: tooltip_color_hex3_tag
+          type: Tag
+          properties:
+            title: "#4c6ef5"
+```
+
+```yaml
+- id: tooltip_arrow_default
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Arrow at edge (default)
+    placement: topLeft
+    arrowPointAtCenter: false
+  blocks:
+    - id: tooltip_arrow_default_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Default arrow
+        color: default
+        variant: outlined
+- id: tooltip_arrow_center
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Arrow at center
+    placement: topLeft
+    arrowPointAtCenter: true
+  blocks:
+    - id: tooltip_arrow_center_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Arrow at center
+        color: primary
+        variant: solid
+```
+
+```yaml
+- id: tooltip_overflow_on
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip auto-adjusts when near the viewport edge
+    autoAdjustOverflow: true
+    placement: top
+  blocks:
+    - id: tooltip_overflow_on_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Auto adjust (default)
+        color: primary
+        variant: solid
+- id: tooltip_overflow_off
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip stays in position even near viewport edges
+    autoAdjustOverflow: false
+    placement: top
+  blocks:
+    - id: tooltip_overflow_off_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No auto adjust
+        color: default
+        variant: outlined
+```
+
+```yaml
+- id: tooltip_delay_fast
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Instant tooltip
+    mouseEnterDelay: 0
+    mouseLeaveDelay: 0
+  blocks:
+    - id: tooltip_delay_fast_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No delay
+        color: primary
+        variant: solid
+- id: tooltip_delay_slow_enter
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip has a 1 second enter delay
+    mouseEnterDelay: 1
+  blocks:
+    - id: tooltip_delay_slow_enter_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 1s enter delay
+        color: primary
+        variant: outlined
+- id: tooltip_delay_slow_leave
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip stays 2 seconds after mouse leaves
+    mouseLeaveDelay: 2
+  blocks:
+    - id: tooltip_delay_slow_leave_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 2s leave delay
+        color: primary
+        variant: dashed
+```
+
+```yaml
+- id: tooltip_default_open
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: I am open by default
+    defaultOpen: true
+    placement: right
+  blocks:
+    - id: tooltip_default_open_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Visible by default
+        color: green
+        variant: solid
+- id: tooltip_destroy_on_hide
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip DOM is destroyed when hidden
+    destroyTooltipOnHide: true
+  blocks:
+    - id: tooltip_destroy_on_hide_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Destroy on hide
+        color: default
+        variant: outlined
+```
+
+```yaml
+- id: tooltip_zindex_high
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: High z-index tooltip (2000)
+    zIndex: 2000
+  blocks:
+    - id: tooltip_zindex_high_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: zIndex 2000
+        color: primary
+        variant: solid
+```
+
+Hover over this text to see the tooltip.
+
+```yaml
+- id: tooltip_on_text
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tooltip on a paragraph
+  blocks:
+    - id: tooltip_on_text_p
+      type: Paragraph
+      properties:
+        content: Hover over this text to see the tooltip.
+- id: tooltip_on_tag
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tooltip on a tag
+  blocks:
+    - id: tooltip_on_tag_el
+      type: Tag
+      properties:
+        title: Hover tag
+        color: blue
+- id: tooltip_on_icon_btn
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Delete this item
+    placement: bottom
+  blocks:
+    - id: tooltip_on_icon_btn_el
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        icon: AiOutlineDelete
+        hideTitle: true
+        color: danger
+        variant: text
+```
+
+```yaml
+- id: tooltip_event_open_change
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip fires an event on open/close
+  events:
+    onOpenChange:
+      - id: tooltip_event_display_message
+        type: DisplayMessage
+        params:
+          content: Tooltip visibility changed!
+          duration: 2
+  blocks:
+    - id: tooltip_event_open_change_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Hover to trigger event
+        color: primary
+        variant: solid
+- id: tooltip_event_set_state
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tracks tooltip state
+    trigger: click
+  events:
+    onOpenChange:
+      - id: tooltip_event_set_state_action
+        type: SetState
+        params:
+          tooltip_was_toggled: true
+  blocks:
+    - id: tooltip_event_set_state_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Click to toggle and set state
+        color: primary
+        variant: outlined
+```
+
+```yaml
+- id: tooltip_overlay_style
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tooltip with custom overlay style
+    overlayStyle:
+      boxShadow: 0 4px 12px rgba(0, 0, 0, 0.3)
+  blocks:
+    - id: tooltip_overlay_style_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom overlay shadow
+        color: primary
+        variant: solid
+```
+
+```yaml
+- id: tooltip_theme_large_radius
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Large radius tooltip
+    theme:
+      borderRadius: 16
+  blocks:
+    - id: tooltip_theme_large_radius_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Large radius
+        color: primary
+        variant: solid
+- id: tooltip_theme_bg
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom background and text color
+    theme:
+      colorBgSpotlight: "#2d3436"
+      colorTextLightSolid: "#74b9ff"
+  blocks:
+    - id: tooltip_theme_bg_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom colors
+        color: primary
+        variant: outlined
+- id: tooltip_theme_font
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Larger font size and line height
+    theme:
+      fontSize: 18
+      lineHeight: 2
+  blocks:
+    - id: tooltip_theme_font_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Large font
+        color: primary
+        variant: dashed
+- id: tooltip_theme_wide
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: This tooltip has a wider max width so longer text can display on a single
+      line without wrapping.
+    theme:
+      maxWidth: 500
+  blocks:
+    - id: tooltip_theme_wide_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide tooltip (500px)
+        color: default
+        variant: outlined
+- id: tooltip_theme_compact
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Compact tooltip
+    theme:
+      paddingXS: 4
+      controlHeight: 24
+      fontSize: 12
+  blocks:
+    - id: tooltip_theme_compact_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Compact theme
+        color: default
+        variant: dashed
+- id: tooltip_theme_zindex
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom z-index via theme
+    theme:
+      zIndexPopup: 2000
+  blocks:
+    - id: tooltip_theme_zindex_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Theme z-index
+        color: default
+        variant: outlined
+```
+
+Hover me (help cursor via element style)
+
+Hover me (Tailwind element class)
+
+```yaml
+- id: tooltip_style_element
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Styled with element CSS key
+  style:
+    .element:
+      cursor: help
+  blocks:
+    - id: tooltip_style_element_p
+      type: Paragraph
+      properties:
+        content: Hover me (help cursor via element style)
+- id: tooltip_style_inner
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom inner styling
+  style:
+    .inner:
+      backgroundColor: "#1a1a2e"
+      color: "#e94560"
+      borderRadius: 12
+      padding: 12px 20px
+      fontSize: 16
+  blocks:
+    - id: tooltip_style_inner_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom inner style
+        color: primary
+        variant: solid
+- id: tooltip_class_element
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tailwind on element wrapper
+  class:
+    element: cursor-help
+  blocks:
+    - id: tooltip_class_element_text
+      type: Paragraph
+      properties:
+        content: Hover me (Tailwind element class)
+- id: tooltip_class_inner
+  type: Tooltip
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tailwind on inner popup
+  class:
+    inner: text-lg font-bold
+  blocks:
+    - id: tooltip_class_inner_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Tailwind inner class
+        color: primary
+        variant: outlined
+```
+
+Product
+
+Revenue
+
+Units Sold
+
+Widget Pro
+
+$12,450
+
+342
+
+Gadget X
+
+$8,230
+
+189
+
+```yaml
+- id: tooltip_table_header_card
+  type: Card
+  properties:
+    title: Monthly Sales Report
+    size: small
+  blocks:
+    - id: tooltip_table_header_row
+      type: Box
+      layout:
+        gap: 0
+        direction: column
+      blocks:
+        - id: tooltip_table_header_labels
+          type: Box
+          class: bg-bg-layout px-4 py-2 border-b border-border
+          layout:
+            gap: 0
+          blocks:
+            - id: tooltip_table_hdr_product
+              type: Tooltip
+              layout:
+                flex: 2 1 0
+              properties:
+                title: The product name as listed in the inventory system
+                placement: top
+              blocks:
+                - id: tooltip_table_hdr_product_text
+                  type: Paragraph
+                  class: font-semibold text-text-secondary text-sm m-0
+                  properties:
+                    content: Product
+            - id: tooltip_table_hdr_revenue
+              type: Tooltip
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Total revenue after discounts and returns
+                placement: top
+              blocks:
+                - id: tooltip_table_hdr_revenue_text
+                  type: Paragraph
+                  class: font-semibold text-text-secondary text-sm m-0
+                  properties:
+                    content: Revenue
+            - id: tooltip_table_hdr_units
+              type: Tooltip
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Number of individual units sold this month
+                placement: top
+              blocks:
+                - id: tooltip_table_hdr_units_text
+                  type: Paragraph
+                  class: font-semibold text-text-secondary text-sm m-0
+                  properties:
+                    content: Units Sold
+        - id: tooltip_table_row_1
+          type: Box
+          class: px-4 py-2 border-b border-border
+          layout:
+            gap: 0
+          blocks:
+            - id: tooltip_table_row_1_product
+              type: Paragraph
+              layout:
+                flex: 2 1 0
+              class: text-sm m-0
+              properties:
+                content: Widget Pro
+            - id: tooltip_table_row_1_revenue
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-sm m-0
+              properties:
+                content: $12,450
+            - id: tooltip_table_row_1_units
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-sm m-0
+              properties:
+                content: "342"
+        - id: tooltip_table_row_2
+          type: Box
+          class: px-4 py-2
+          layout:
+            gap: 0
+          blocks:
+            - id: tooltip_table_row_2_product
+              type: Paragraph
+              layout:
+                flex: 2 1 0
+              class: text-sm m-0
+              properties:
+                content: Gadget X
+            - id: tooltip_table_row_2_revenue
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-sm m-0
+              properties:
+                content: $8,230
+            - id: tooltip_table_row_2_units
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-sm m-0
+              properties:
+                content: "189"
+```
+
+```yaml
+- id: tooltip_form_card
+  type: Card
+  properties:
+    title: User Profile Settings
+  blocks:
+    - id: tooltip_form_username
+      type: TextInput
+      properties:
+        label:
+          title: Username
+          extra:
+            - id: tooltip_form_username_help
+              type: Tooltip
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Your unique username. Must be 3-20 characters, letters and numbers only.
+                placement: right
+              blocks:
+                - id: tooltip_form_username_icon
+                  type: Icon
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    name: AiOutlineQuestionCircle
+                    size: 14
+                    color: "#8c8c8c"
+        placeholder: Enter your username
+    - id: tooltip_form_email
+      type: TextInput
+      properties:
+        label:
+          title: Email Address
+          extra:
+            - id: tooltip_form_email_help
+              type: Tooltip
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: We will send account notifications to this address. You can change it at
+                  any time.
+                placement: right
+              blocks:
+                - id: tooltip_form_email_icon
+                  type: Icon
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    name: AiOutlineQuestionCircle
+                    size: 14
+                    color: "#8c8c8c"
+        placeholder: Enter your email
+```
+
+Active Users
+
+Monthly Revenue
+
+```yaml
+- id: tooltip_dashboard_row
+  type: Box
+  layout:
+    gap: 16
+  blocks:
+    - id: tooltip_dashboard_users_card
+      type: Card
+      layout:
+        flex: 1 1 0
+      properties:
+        size: small
+      blocks:
+        - id: tooltip_dashboard_users_header
+          type: Box
+          layout:
+            gap: 8
+            align: center
+          blocks:
+            - id: tooltip_dashboard_users_title
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-text-secondary text-sm m-0
+              properties:
+                content: Active Users
+            - id: tooltip_dashboard_users_info
+              type: Tooltip
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Users who have logged in at least once in the last 30 days
+                placement: top
+              blocks:
+                - id: tooltip_dashboard_users_info_icon
+                  type: Icon
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    name: AiOutlineInfoCircle
+                    size: 14
+                    color: "#8c8c8c"
+        - id: tooltip_dashboard_users_stat
+          type: Statistic
+          properties:
+            value: 2847
+        - id: tooltip_dashboard_users_tag
+          type: Tag
+          properties:
+            title: +12.3%
+            color: success
+    - id: tooltip_dashboard_revenue_card
+      type: Card
+      layout:
+        flex: 1 1 0
+      properties:
+        size: small
+      blocks:
+        - id: tooltip_dashboard_revenue_header
+          type: Box
+          layout:
+            gap: 8
+            align: center
+          blocks:
+            - id: tooltip_dashboard_revenue_title
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              class: text-text-secondary text-sm m-0
+              properties:
+                content: Monthly Revenue
+            - id: tooltip_dashboard_revenue_info
+              type: Tooltip
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Gross revenue before taxes and refunds for the current billing period
+                placement: top
+              blocks:
+                - id: tooltip_dashboard_revenue_info_icon
+                  type: Icon
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    name: AiOutlineInfoCircle
+                    size: 14
+                    color: "#8c8c8c"
+        - id: tooltip_dashboard_revenue_stat
+          type: Statistic
+          properties:
+            value: 64250
+            prefix: $
+        - id: tooltip_dashboard_revenue_tag
+          type: Tag
+          properties:
+            title: +8.7%
+            color: success
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `arrowPointAtCenter` | boolean | `false` | Whether the arrow is pointed at the center of target. |
+| `autoAdjustOverflow` | boolean | `true` | Whether to adjust popup placement automatically when popup is off screen. |
+| `color` | string | - | The background color. |
+| `defaultOpen` | boolean | `false` | Whether the floating tooltip card is visible by default. |
+| `destroyTooltipOnHide` | boolean | `false` | Whether to destroy the tooltip DOM when hidden. |
+| `mouseEnterDelay` | number | `0.1` | Delay in seconds, before tooltip is shown on mouse enter. |
+| `mouseLeaveDelay` | number | `0.1` | Delay in seconds, before tooltip is shown on mouse enter. |
+| `placement` | string | `"top"` | The position of the tooltip relative to the target. Enum: `top`, `left`, `right`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `leftTop`, `leftBottom`, `rightTop`, `rightBottom`. |
+| `trigger` | string | `"hover"` | Tooltip trigger mode. Enum: `hover`, `focus`, `click`. |
+| `title` | string | - | Title to show in the title area - supports html. Overwritten by blocks in the title content area. |
+| `zIndex` | integer | - | The z-index of the Tooltip. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tooltip tokens](https://ant.design/components/tooltip#design-token). |
+| `theme.zIndexPopup` | number | `1070` | Z-index of the tooltip. |
+| `theme.maxWidth` | number | `250` | Maximum width of the tooltip. |
+| `theme.colorBgSpotlight` | string | `"rgba(0, 0, 0, 0.85)"` | Background color of the tooltip. |
+| `theme.colorTextLightSolid` | string | `"#fff"` | Text color inside the tooltip. |
+| `theme.borderRadius` | number | `6` | Border radius of the tooltip. |
+| `theme.controlHeight` | number | `32` | Minimum height of the tooltip. |
+| `theme.fontSize` | number | `14` | Font size of tooltip text. |
+| `theme.lineHeight` | number | `1.5714` | Line height of tooltip text. |
+| `theme.paddingXS` | number | `8` | Horizontal padding inside the tooltip. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onOpenChange` | \- | Trigger action when visibility of the tooltip card is changed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Tooltip element. |
+| `/inner` | The Tooltip inner. |
+
+| Slot | Description |
+| --- | --- |
+| `content` | Child blocks that trigger the tooltip. |