How To Add Hotspots On An Image In WordPress

Image hotspots turn a flat picture into something people can explore. A reader points at a spot on the image, and a small panel opens with details about that exact spot.

WordPress does not do this on its own. The core Image block gives you a picture and a caption, and that is the end of it. To pin interactive markers on top of an image, you need a block built for the job.

This guide shows you how, using the Image Hotspots block in Ultimate Blocks. No code, no shortcodes, no page builder.

What Are Image Hotspots?

An image hotspot is a marker pinned to one specific point on an image. Hover it on desktop, tap it on mobile, and a tooltip opens with content tied to that point.

Think of it as a label that stays hidden until somebody asks for it. The image stays clean. The detail sits one interaction away.

That is the whole appeal. You can attach a lot of information to a single image without turning it into a cluttered infographic.

Here’s an example of image hotspots:

Beaker

Used to hold, mix, heat, and roughly measure liquids.

Microscope

Magnifies tiny objects so they can be examined in greater detail.

Buy Now

Test Tubes

Used to contain, mix, or heat small amounts of substances during experiments.

Digital Scale

Measures the mass of substances and laboratory materials accurately.

Safety Goggles

Protect the eyes from chemical splashes, particles, and other laboratory hazards.

When Image Hotspots Are Worth Using

Hotspots are usually associated with online stores, but the use cases run much wider:

• Shoppable images. Pin a marker to each item in a styled photo, with the price and a buy button inside the tooltip.
• Labelled diagrams. Anatomy, lab equipment, machine parts, plant varieties, anything a reader needs named.
• Maps and floor plans. Campus maps, venue layouts, resort grounds, store floor plans.
• Product feature tours. Drop a screenshot of your app or dashboard and put one marker on each feature.
• Recipes and how-tos. Mark each ingredient or tool in a flat-lay photo.
• Real estate and interiors. Point out finishes, appliances, and room dimensions in a room photo.

One rule worth keeping: if the image already explains itself, skip the hotspots. They earn their place when there is real information hiding in the picture.

What You Need Before You Start

• WordPress with the block editor (Gutenberg)
• The free Ultimate Blocks plugin, from the WordPress.org plugin directory
• Ultimate Blocks Pro, since Image Hotspots is a Pro block

Pro runs as an add-on on top of the free plugin rather than replacing it, so both need to stay installed and active.

You will also want one good image. Wide images work best, because they give you room to space markers out without them crowding each other.

How To Add Hotspots On An Image In WordPress

Follow this step-by-step guide to add hotspots on an image in WordPress.

Step 1: Install Ultimate Blocks

Go to Dashboard > Plugins > Add New Plugin, search for “Ultimate Blocks”, then click Install Now and Activate.

Next, install the Pro add-on. Download the Pro zip from your account, go to Plugins > Add New Plugin > Upload Plugin, upload it, activate it, and enter your license key when prompted.

Read: How to Install and Activate Ultimate Blocks Pro

Step 2: Add The Image Hotspots Block

Open the post or page where you want the interactive image. Click the + button, type “Image Hotspots”, and insert the block.

Step 3: Choose Your Image

Upload a new image or pick one from your Media Library.

Two things to look for when choosing: enough resolution that it still looks sharp at full width, and enough breathing room around the points you plan to mark. A tightly cropped photo leaves you nowhere to put markers.

Step 4: Add Your First Hotspot

Click Add Hotspot in the block toolbar. A marker appears on the image.

Step 5: Position The Marker

Drag the marker to the exact point you want to label.

A small habit that helps: place the marker slightly to the side of the subject rather than dead centre on it. That way the tooltip opens beside the thing you are describing instead of covering it up.

Step 6: Build The Tooltip

Select the hotspot, then add your content inside the tooltip.

This is where the block does something most hotspot plugins do not. The tooltip is a block container, which means anything in the inserter can go inside it. Not just a title and one line of text.

So a tooltip can hold:

• A heading and a paragraph, for a straightforward label
• An image, for a close-up of the thing you are pointing at
• A button, so the tooltip becomes a place where people take action
• A Tableberg table, for specs or measurements
• A star rating, a list, or a stack of several blocks together

That single detail changes what the block is for. It is not only an annotation tool. It is a way to build genuinely interactive images inside a normal post.

Step 7: Repeat For Every Point

Add a marker for each point you want to highlight, positioning and filling each one as you go.

Somewhere between three and eight hotspots is the sweet spot for a standard content-width image. Past that, markers start overlapping and readers stop bothering.

Step 8: Preview, Then Publish

Preview the page on a desktop screen and on a phone before publishing. Three things to check:

1. Tooltips near the edges of the image are not getting cut off
2. Markers are far enough apart to tap accurately on a small screen
3. The tooltip content is short enough that it does not swallow the whole image

Tips For Hotspots People Actually Click

Make the markers look clickable. If a marker blends into the image, nobody discovers it. Pick a marker colour that contrasts with the photo underneath.

Keep tooltip content short. A tooltip is a glance, not an article. Two or three lines plus an optional button is usually enough.

Give each tooltip one job. Name the thing, or sell the thing, or explain the thing. Trying to do all three at once makes the panel too tall.

Do not hide anything essential. Content that every reader needs should live in the body of your post as normal text. Tooltips are for supporting detail. That is better for readers who never hover, and better for search engines too.

Write proper alt text on the base image. The hotspots are interactive, but the image underneath is still an image, and it still needs describing.

Compress the image. A heavy background image is the slowest part of an interactive image. Serving WebP images is an easy win here.

Common Problems And Fixes

The block does not appear in the inserter. Image Hotspots is a Pro block. Check that both the free Ultimate Blocks plugin and the Pro add-on are active, and that your license is activated.

A tooltip gets cut off at the edge of the image. Move that marker further inward. Tooltips need space to open into.

Markers look cramped on mobile. The image scales down but the number of markers does not. Either reduce the number of hotspots or pick a wider image with more space between the points.

Changes are not showing on the front end. Clear your page cache and any CSS or JavaScript optimisation cache, then reload.

The tooltip is taller than the image. Trim the content inside it, or move the longer explanation into the post body and keep the tooltip as a short label.

Frequently Asked Questions

Wrapping Up

Adding hotspots to an image in WordPress comes down to four moves: insert the block, choose your image, drop your markers, fill the tooltips.

The part worth exploiting is what goes inside the tooltip. Because it accepts any block, one image can carry product cards, spec tables, buttons, and close-up photos, all without pushing a single extra element onto the page.

Image Hotspots ships with Ultimate Blocks Pro, along with every other Pro block. You can see the full block lineup in action on the all blocks page.

Stuck on something? Leave a comment below and we will help you out.