---
title: Interactive Image Hotspots Documention
description: Interactive Image Hotspots Documention
---

[Skip to content](https://www.modfrybus.shop/interactive-image-hotspots-documention#main-content)

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=90&height=52&name=Modfrybus-logo.png)](https://www.modfrybus.shop/?hsLang=en)

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)

Open main navigation

Close main navigation

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)
- [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

[Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

#### Interactive Image Hotspots Documention

## 1. Introduction (Overview)

**Interactive Image Hotspots** module lets you add clickable hotspot dots with tooltips directly on images. Fully responsive and customizable for desktop, tablet, and mobile.

## 2. Key Features

- **Image-Based Hotspots** – Add interactive dots directly on images
- **Multiple Hotspot Support** – Place several hotspots on a single image
- **Click-to-Open Tooltips** – Display detailed information on user interaction
- **Fully Responsive** – Seamlessly adapts across desktop, tablet, and mobile devices
- **Responsive Tooltip Positioning** – Adjust tooltip alignment for desktop, tablet, and mobile
- **Flexible Dot Position Control** – Easily manage hotspot placement using percentage values
- **Adjustable Tooltip Width** – Control tooltip minimum and maximum width for better readability
- **Fully Customizable** – Customize tooltip styles, spacing, colors, and layout
- **Mobile-Friendly Behavior** – Hotspots remain stable and usable on smaller screens

## 3. Installation – Downloading the Module from HubSpot Marketplace

- Log in to your HubSpot account.
- Go to the **Marketplace** from the main navigation menu.
- Search for your module by name.
- Find the module in the results and click **Install**.
- If it’s a paid module, you can also click **Buy Now** to purchase and install directly.

## 4. How to Use – Adding the Module to Your Page

- Open your HubSpot page editor.
- Click on **Add Module**.
- Search for your module by name.
- Drag and drop the module into the desired section of your page.
- **Interactive Image Hotspots** lets you add clickable dots with tooltips on images. Fully responsive and customizable for desktop, tablet, and mobile.

## 5. Module Settings Guide

**1. Content Tab** 

- **Image-Based Hotspots** – Add interactive dots directly on images
- **Multiple Hotspot Support** – Place several hotspots on a single image
- **Responsive Tooltip Positioning** – Adjust tooltip alignment for desktop, tablet, and mobile
- **Flexible Dot Position Control** – Easily manage hotspot placement using percentage values

![Group 1000002176 (1)](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002176%20(1).png?width=1000&height=752&name=Group%201000002176%20(1).png)

**2. Style Tab**

- **Module Width Control** – Choose full-width or custom container
- **Fully Customizable** - Adjust colors, typography, shadows, and spacing.
- **Heading & Description** – Fully customizable text, including font color, font size, line height, and separate settings for mobile and tablet.
- **Spacing** – Tooltip spacing adjustable for desktop, tablet, and mobile.
- **Dot Color** – Customize hotspot dot background color, border color, and shadow color.
- **Dot Size** – Set different hotspot dot sizes for desktop, tablet, and mobile.
- **Tooltip Content Box Width** – Customize tooltip box width independently for desktop, tablet, and mobile.

![Group 1000002177](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002177.png?width=1000&height=752&name=Group%201000002177.png)

## 6. Examples / Demo Preview

View the module in action:[https://www.modfrybus.shop/interactive-image-hotspots](https://www.modfrybus.shop/interactive-image-hotspots?hsLang=en)<https://www.modfrybus.shop/ribbon-cards?hsLang=en><https://www.modfrybus.shop/hero-with-video-popup-divider?hsLang=en>

## 7. Support & Contact

For questions or support, contact us at [productqueriemodfrybus@outlook.com](mailto:productqueriemodfrybus@outlook.com) We’re happy to help!

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=150&height=87&name=Modfrybus-logo.png "Modfrybus-logo")](https://www.modfrybus.shop/?hsLang=en)

[Privacy Policy](https://www.modfrybus.shop/privacy-policy?hsLang=en)

[Terms and Conditions](https://www.modfrybus.shop/terms-and-conditions?hsLang=en)

[Refund Policy & Support](https://www.modfrybus.shop/modfrybus-refund-policy-support?hsLang=en)

 Copyright © 2025, Modfrybus