The Hover Card block shows a popup card when the user hovers over a trigger. The trigger can be text, an icon, or both.

<img
  src="https://res.cloudinary.com/zimple/image/upload/f_auto,q_auto/v1777458274/interface-docs/hover-card-preview.png"
  alt="Render mode showing a 'Hover me' trigger followed by a small question-mark icon, with the hover card popup 'Hover card content' visible just below it."
  width="1024"
  height="460"
  loading="lazy"
/>

## Settings

| Setting | Description |
|---|---|
| **Trigger Type** | Pick **Text Only**, **Icon Only**, or **Text + Icon** -- what the user hovers over (default: Text Only). |
| **Trigger Text** | The trigger's visible text. Shown when Trigger Type is **Text Only** or **Text + Icon**. Supports the Data Picker. |
| **Icon Type** | Pick **Warning (Triangle)**, **Info (Exclamation)**, or **Question (Help)** (default: Question (Help)). Shown when Trigger Type is **Icon Only** or **Text + Icon**. |
| **Icon Color** | Pick **Gray** (default), **Red**, **Yellow**, **Blue**, or **Green**. |
| **Content** | The body of the popup card. Supports the Data Picker. |
| **Width** | Popup width in pixels, between 100 and 600 (default: 320). |
| **Alignment** | **Start**, **Center** (default), or **End** -- horizontal alignment of the popup relative to the trigger. |

<img
  src="https://res.cloudinary.com/zimple/image/upload/f_auto,q_auto/v1777458266/interface-docs/hover-card-settings.png"
  alt="Builder view 'Hover Card Demo' with a Hover Card block selected on the canvas. The Block Settings sidebar shows the Configuration sub-tab populated: Trigger Type 'Text + Icon', Trigger Text 'Hover me', Icon Type 'Question (Help)', Icon Color 'Gray', Content 'Hover card content', Width 320, and Alignment 'Center'."
  width="1440"
  height="900"
  loading="lazy"
/>

## Style and Visibility

The Hover Card block uses the standard **Style** sub-tab (background, borders, radius) and **Visibility** sub-tab in Block Settings, the same as every other block. See [Block Styles](/docs/buttons/interface-button/interface-builder/reference/styles/block-styles) and [Conditional Visibility](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).