The Image Hotspots block in Ultimate Blocks lets you place clickable markers on any image, and each marker opens a tooltip with extra content. Use it to label parts of a product, explain a diagram or guide visitors around a map. Image Hotspots is a Pro block, so it needs Ultimate Blocks Pro.
| Block name in the editor | Image Hotspots |
| Plan | Pro |
| Best for | Shoppable images, labelled diagrams, maps, floor plans and product tours |
| Live demo | See the Image Hotspots block in action |
What you can use it for #
- Shoppable images: mark each product in a room or outfit photo and add a price and a buy button in the tooltip.
- Labelled diagrams: name the parts of a machine, a plant or the human body for lessons and guides.
- Maps and floor plans: point out rooms, booths, venues or locations with a short description.
- Product tours: explain the features of a device or a software screenshot one point at a time.
- Recipes: tag the ingredients or steps on a photo of the finished dish.
- Real estate photos: highlight features such as a new kitchen, flooring or a view.
How to add the Image Hotspots block #
- Make sure Ultimate Blocks Pro is installed and active next to the free plugin.
- Open the post or page in the WordPress block editor.
- Click the + (Block Inserter) button.
- Search for Image Hotspots and click the block to add it.
- Upload an image or select one from your media library.
Add and edit hotspots #
- Click anywhere on the image to add a hotspot at that spot. You can also use Add Hotspot.
- Click the hotspot to open its tooltip, then type your content. A tooltip can hold any blocks, such as text, headings, images or buttons.
- Select the hotspot to see its own settings in the sidebar, and fine tune where it sits.
Each hotspot has these settings:
- Horizontal Position (%): move the marker left or right on the image.
- Vertical Position (%): move the marker up or down on the image.
- Tooltip Position: open the tooltip on the Top, Right, Bottom or Left of the marker. Pick a side with enough room so the tooltip is not cut off.
- Marker Background: the color of the marker.
- Tooltip Background and Tooltip Text: the colors of the tooltip box and its text.
Because positions are set in percent, the markers stay on the right spot when the image gets smaller on tablets and phones.
Settings tab #
Select the Image Hotspots block (not a single hotspot) and open the Settings tab (gear icon) to control the image.
- Alternative Text: describe the image for screen readers and search engines.
- Aspect ratio: crop the image to a shape such as square, 4:3 or 16:9, or keep the original.
- Scale: choose Cover (fill the space and clip what does not fit) or Contain (show the whole image).
- Width and Height: set a fixed size in pixels, or leave them on auto.
- Resolution: choose which image size WordPress loads, such as Large or Full Size.
You can also add a caption and a link to the image, and set Wide or Full width alignment from the block toolbar. The bottom of the Settings tab has the Visibility Control, Animation, Custom CSS and Responsive Control panels.
Styles tab #
Switch to the Styles tab (half-circle icon) to add a Border around the image and round its corners with Border Radius. The block also supports the WordPress duotone filter.
Tip: Keep tooltip text short and use 3 to 8 hotspots per image. Too many markers make the image hard to read, especially on phones.
Extensions you can use with this block #
- Visibility Control (Pro): show the block only to certain users or on a schedule.
- Animation (Pro): animate the block when it comes into view.
- Responsive Control: hide the block on desktop, tablet or mobile.
- Custom CSS: add your own CSS to this block only.
- Saved Styles (Pro): save your design and reuse it on other posts.
Frequently asked questions #
Is the Image Hotspots block free?
No. Image Hotspots is one of the Pro blocks in Ultimate Blocks, so you need an active Ultimate Blocks Pro license together with the free plugin.
How do I add a hotspot to an image?
Add the Image Hotspots block, choose an image, then click anywhere on the image to place a hotspot. Click the hotspot to write its tooltip.
Can I put images or buttons inside a hotspot tooltip?
Yes. A tooltip can hold any blocks, so you can add text, images, buttons or links, for example to build a shoppable image.
Do hotspots stay in place on mobile?
Yes. Hotspot positions are saved as percentages of the image, so the markers move with the image when it resizes.
Can I change the color of the hotspot markers?
Yes. Select a hotspot and set its Marker Background, Tooltip Background and Tooltip Text colors.
