## Adding a Hover Card Block

1. Hover the gap between two rows and click the `+` button to add a row (pick any layout in the **Add row** dialog).
2. Click an empty column inside the row, then pick **Hover Card** in the **Add block** dialog.
3. Click the new block to open its settings in the sidebar.

## Trigger Type

Choose what the user hovers over to reveal the card. Set **Trigger Type** to:

- **Text Only** — displays trigger text only (default)
- **Icon Only** — displays an icon only
- **Text + Icon** — displays both text and an icon

When the trigger includes text, fill the **Trigger Text** field. You can use static text or bind it dynamically with the Data Picker.

## Icon Configuration

When the trigger type includes an icon (**Icon Only** or **Text + Icon**), the sidebar shows two extra fields:

- **Icon Type** — pick the icon style: **Warning (Triangle)**, **Info (Exclamation)**, or **Question (Help)**. Default: **Question (Help)**.
- **Icon Color** — pick the icon color: **Gray**, **Red**, **Yellow**, **Blue**, or **Green**. Default: **Gray**.

## Content, Width, Alignment

- **Content** — the hover card body content. Use static text or the Data Picker for dynamic values.
- **Width** — set the card width in pixels (100–600). Default: 320.
- **Alignment** — set card alignment relative to the trigger: **Start**, **Center**, or **End**. Default: **Center**.

<img
  src="https://res.cloudinary.com/zimple/image/upload/f_auto,q_auto/v1777289185/interface-docs/hover-card-settings.png"
  alt="Block Configuration sidebar for the Hover Card block. Trigger Type is set to 'Text + Icon'. Trigger Text contains 'Pricing details'. Icon Type 'Question (Help)' and Icon Color 'Gray' are visible below. Content shows a multi-line description, Width is 320 (helper text 'Width in pixels (100-600)'), and Alignment is set to Center. The canvas on the left shows the new Hover Card block in Row 1."
  width="1024"
  height="640"
  loading="lazy"
/>

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_800,h_180,y_60,g_north_west/f_auto,q_auto/v1777290584/interface-docs/hover-card-preview.png"
  alt="Rendered hover card. The trigger 'Hover me' is shown alongside a small gray question-mark icon. The hover card popup is open below the trigger and displays its rendered content."
  width="800"
  height="180"
  loading="lazy"
/>