Image Hotspot
A picture is worth a thousand words, but what if you could annotate it? Don’t let visitors guess what’s important in your product shots, maps, or diagrams. Master Addons Image Hotspot Element lets you place interactive markers directly onto any image. Add icons, customize their look, and attach rich tooltips filled with text, images, or links. Create interactive product guides, explain complex infographics, or build engaging portfolio showcases. Transform your static visuals into exploratory, self-explanatory experiences.
Visual Hotspot Placement & Management
Start with your base image – a product, a map, a technical diagram. Then, place your interactive markers with pixel-perfect precision. Use the intuitive Position controls, adjusting the Horizontal and Vertical percentage sliders to move each hotspot exactly where it needs to be. Add as many hotspots as you want with the + Add Item button, managing each one independently. This visual placement turns any image into a detailed, interactive canvas.
- Precise Pinpointing: Use Horizontal (%) and Vertical (%) sliders to place hotspots anywhere on your image.
- Unlimited Hotspots: Add numerous points of interest with the + Add Item repeater.
- Easy Management: Label, reorder, or delete individual hotspots (#1, #2, etc.) easily.
- Live Positioning: See the hotspot move in the editor as you adjust the sliders for perfect placement.
Rich Tooltip Content System
The magic happens in the tooltip. For each hotspot, open the Tooltip Content editor – a full-featured text area where you can write descriptions, add Media, or even insert shortcode. Explain a product feature, provide a statistic, or link to another page. You control when it appears: set the Trigger to Hover for quick discovery or Click for deliberate interaction, especially crucial for mobile users.
- Advanced Content Editor: Add formatted text, images, or videos inside each tooltip.
- Flexible Triggering: Choose Hover for instant previews or Click for controlled, mobile-friendly interaction.
- Action-Oriented: Include Links within tooltips to drive users to related pages or products.
- Contextual Information: Use tooltips to reveal specs, prices, descriptions, or instructions right on the image.
Frequently Asked Questions For Image Hotspot
What happens on mobile phones where there's no hover?
You can set the tooltip Trigger on Click in the Tooltips settings. This makes the hotspot tap-to-reveal on touch devices, ensuring full functionality. Alternatively, you can set tooltips to Disable On Mobile, making the hotspot itself a clickable link to more information.
Can I use a custom image instead of an icon for the hotspot marker?
Yes. You can upload or add a custom image as a marker from your media library. Our suggestion is to use a simple image as the marker that can be easily understood.
Is the base image itself responsive?
Yes. The Image you choose will scale responsively with the container. The hotspot positions (set by percentages) are also relative, so they will remain in the correct spot on the image across all screen sizes.
What's a good use case for this element?
Perfect for E-commerce Product Images (highlighting features), Interactive Maps (showing locations), Infographics (explaining data points), Technical Diagrams (labeling parts), or Team Photos (linking to individual bios).
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
