# Tooltip

### Section overview

The Tooltip section creates a fixed position button that reveals various content blocks when clicked. It provides a non-intrusive way to display additional information or functionality on your storefront.

#### Common use cases

* Displaying newsletter signup forms
* Providing contact forms for customer support
* Showcasing promotional content or announcements
* Highlighting important information that doesn't need to be visible at all times

#### Usage tips

* Choose an appropriate placement that doesn't interfere with critical page elements
* Keep tooltip content concise and focused to avoid overwhelming users
* Consider mobile users by testing the placement on smaller screens
* Use icons to enhance button visibility and communicate purpose clearly
* Limit the number of tooltip sections on a single page to prevent cluttering

### Section settings

| Setting      | Description                                                                            |
| ------------ | -------------------------------------------------------------------------------------- |
| Button label | Text displayed on the tooltip button                                                   |
| Button icon  | Icon displayed on the tooltip button                                                   |
| Color button | Style of the tooltip button (primary, secondary, etc.)                                 |
| Placement    | Position of the tooltip on the screen (top left, top right, bottom left, bottom right) |
| Visibility   | Control when the tooltip is visible (all devices, mobile only, desktop only)           |

### Block settings

#### Button

A clickable link that appears inside the tooltip content.

| Setting      | Description                                |
| ------------ | ------------------------------------------ |
| Button label | Text displayed on the button               |
| Button icon  | Icon displayed on the button               |
| Button url   | Destination URL when the button is clicked |

#### Text

Displays formatted text content inside the tooltip.

| Setting | Description                  |
| ------- | ---------------------------- |
| Content | Rich text content to display |

#### Image

Displays an image inside the tooltip.

*Limit: 1 per section*

| Setting | Description                     |
| ------- | ------------------------------- |
| Image   | Image to display in the tooltip |

#### Video

Embeds a video inside the tooltip.

*Limit: 1 per section*

| Setting            | Description                                     |
| ------------------ | ----------------------------------------------- |
| Video              | Video to display in the tooltip                 |
| Enable autoplay    | Automatically play the video when tooltip opens |
| Enable mute toggle | Show mute/unmute button for the video           |
| Enable loop        | Continuously loop the video                     |

#### Newsletter

Adds a newsletter signup form inside the tooltip.

*Limit: 1 per section*

| Setting         | Description                                |
| --------------- | ------------------------------------------ |
| Content         | Explanatory text for the newsletter signup |
| Button label    | Text for the submit button                 |
| Disclaimer      | Optional disclaimer text below the form    |
| Success message | Message displayed after successful signup  |

#### Form

Adds a contact form inside the tooltip.

*Limit: 1 per section*

This block has no customizable settings.