Some images need a little explaining, like a product shot, a floor plan, or a map. The Image Hotspot widget in Master Addons for Elementor pins clickable markers anywhere on an image, and each one shows a tooltip with text or a link when a visitor hovers or taps it.
You load an image, drop hotspots where you want them, add the tooltip text, then style the markers and set how the tooltips behave. This guide covers every setting in the widget.
What the Image Hotspot widget does #
The widget puts markers on top of a single image. Each hotspot has its own position, icon, and tooltip, so you can label parts of a photo or link them to other pages. Hover or click a marker and its tooltip pops up next to it.
Three tabs run it. Content holds the image, the hotspots, and the tooltip behavior. Style handles the image, the marker colors, and the tooltip look. Advanced is the usual Elementor spacing and visibility.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- An image, and the labels or links you want each hotspot to show.
How to add the Image Hotspot widget #
In the Elementor editor, open the Elements panel and search for Image Hotspot, or scroll to the Master Addons section (the widgets carry a purple MA badge). Drag it onto the page and it loads with a sample image and markers you can edit.
Choose the image #
Open the Content tab. The Image section is where you load the base picture that the hotspots sit on.
- Choose Image: pick the picture from the media library.
- Image Resolution: the size served, like Large or Full.
- Alignment: left, center, or right within its column.
Add hotspots #
Open the Hotspots section. It is a repeater, so each marker is its own item. Use Add Item to add markers and drag them into place on the image.
- Add Item: add as many hotspots as the image needs.
- Disable Pulse Effect: turn off the pulsing animation on the markers.
- Drag to position: move each marker on the image, or set exact coordinates.
Set up each hotspot #
Click a hotspot to open its settings. The Content tab sets the marker type, its tooltip text, and an optional link.
- Type: show nothing, an icon, or an image inside the marker.
- Text and Link: a short label and a URL for the marker.
- Tooltip Content: the full text shown on hover, edited in a WYSIWYG box.
Style each hotspot #
The Style tab on a hotspot sets its colors. You get a color and background for the normal state and a separate set for hover, plus an opacity slider.
- Default Color and Background: the marker at rest.
- Hover Color and Background: how it changes on hover.
- Opacity: how solid the marker looks.
Control the tooltips #
Back in the main Content tab, the Tooltips section controls how every tooltip behaves: where it sits, how it animates, and whether it opens on hover or click.
- Show Position and Arrow: which side the tooltip opens on and whether it has a pointer.
- Animation: the reveal effect, like Shift-Toward.
- Trigger on Click: open tooltips on click instead of hover, better for touch.
Style the image and tooltips #
Open the Style tab on the widget. The Image section sets the picture’s opacity, border, and filters, and separate Hotspots and Tooltips sections style the markers and the tooltip boxes.
- Image: opacity, border radius, box shadow, and CSS filters.
- Hotspots: global size and color for the markers.
- Tooltips: the tooltip background, text color, and typography.
Common use cases #
- Product images pinning features or specs to parts of the photo.
- Maps and floor plans marking rooms, booths, or locations.
- Infographics adding detail without cluttering the image.
- Team or office photos labeling people or areas.
- Tutorials pointing out steps or parts on a screenshot.
Tips for working with the Image Hotspot widget #
- Keep hotspots readable. Space them out so the markers and tooltips do not overlap on smaller screens.
- Use click on mobile. Turn on Trigger on Click so touch users can open tooltips, since there is no hover on a phone.
- Contrast the markers. Pick a marker color that stands out from the image behind it, or a busy photo will swallow it.
- Keep tooltip text short. A line or two reads better than a paragraph stuffed into a floating box.
- Set exact positions. Use the Position tab for precise placement instead of eyeballing the drag.
Watch the video tutorial #
Prefer to follow along on screen? The video tutorial below walks through the Image Hotspot element from start to finish, showing how the image, hotspots, tooltips, and styling work in the Elementor editor.
Frequently Asked Questions #
What is the Image Hotspot widget in Master Addons?
It is an Elementor widget that pins interactive markers on an image. Each hotspot has its own position, icon, and tooltip with text or a link, shown on hover or click. Everything is set from the Elementor panel with no code.
How do I add more hotspots to an image?
Open the Hotspots section in the Content tab and use Add Item to create another marker. Each new hotspot gets its own content, style, and position, and you can drag it into place on the image or set exact coordinates in the Position tab.
Can I add a link to a hotspot?
Yes. Each hotspot has a Link field in its Content tab, so a marker can point to any URL. That lets an image act as a clickable map, sending visitors to a product page, a section, or an external site from a pin on the photo.
Do image hotspots work on mobile?
Yes, but hover does not exist on touch. Turn on Trigger on Click in the Tooltips section so mobile users can tap a marker to open its tooltip. You can also hide tooltips below a breakpoint and use the marker link instead.
Can I use a custom icon or image as the marker?
Yes. Each hotspot has a Type option in its Content tab where you can show an icon or an image inside the marker instead of the default. That way the markers can match your brand or the subject of the image.
Wrapping up #
The Image Hotspot widget turns a flat image into an interactive one: load the picture, pin the markers, add tooltips, then style the markers and set the tooltip behavior. For related widgets, see the Image Comparison widget and the Image Hover Effects widget, browse the full Master Addons widgets and extensions, and check the pricing page for what each plan includes.
