Image Hotspot

Make your images interactive with the Image Hotspot widget. Add icons or text, display tooltips on hover or click, and use animations to guide users. Highlight key areas and make your images easy to explore.

With just a few clicks, you can control the position, content, and movement of each hotspot. This makes it simple to explain features, showcase products, or provide extra information directly on your images.

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.   

How To Activate Image Hotspot 

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Widgets Tab. 
4. Under General, toggle on Image Hotspot.  

Step 1: Choose and Upload Your Image

Before anything else, press the ‘+’ icon, enter Image Hotspot in the search bar, and choose it. 

Once you click on the Image Hotspot, you will see three functions: Image, Hotspot, & Tooltip. Let’s start with an image. 

Image

By clicking on the ‘+’ icon upload any image based on your choice. 

Image Resolution: Image Resolution lets you choose sizes like Thumbnail, Medium, Large, Full, and so much more.

For example, ‘Full’ is selected here, but you can choose any resolution you prefer. 

Step 2: Customize Your Hotspots

Make your hotspots interactive by customizing content, layout, and movement.

HotSpot 

Hotspot List: To add text or an icon to the image hotspot, click on Item #1. After clicking, the edit options will appear, allowing you to customize your Image Hotspot. You will find the Content and Position option. 

For example, only the content is customized here, and the position is left as default. However, you can customize it as you like. 

Hotspot Layout: It offers Default, Icon, Text, and Icon + Text options to display your Icon Hotspot. You can also upload a custom icon, text, or combine both. For example, Default is chosen here, but you can select any option you prefer. 

Tooltip Type: It has two options: Content and Link. Content shows text or icons, and Link makes them clickable. For example, Content is selected here. 

Tooltip Content: Under Tooltip Content, you’ll find options like Add Media and Paragraph. With Add Media, you can upload an image to show on your hotspot when hovered or clicked. With Paragraph, you can add text to display on hover or click.

For example, only the text ‘Coffee’ is used here instead of an image. You can add an image, text, or both as you like.

Animation

In animation you will find three option soft beat, pulse, and none. By choosing any one of them you can determine how you want your image hotspot to animate. 

Soft beat:  The hotspot gently grows and shrinks, like a soft heartbeat.

Pulse: The hotspot quickly grows and shrinks, making it more noticeable.

None: The hotspot does not move.

For example, Pulse is chosen here, but you can select any option you like.

Animation Speed

Add animation speed value as per your choice. However, here it’s set to the value 3.

Pulse Color

You can choose any Pulse color you like. However, here, it’s kept as the default.

Step 3: Manage Tooltip Appearance

Decide how and where the tooltip appears to make your hotspots clear and interactive.

ToolTip

Trigger Type

In Trigger Type, you can choose Hover, Click, or None to decide how your hotspot appears:

Hover: The animation plays when you move your mouse over the hotspot.

Click: The animation plays when you click on the hotspot.
None: The hotspot does not animate at all.

For example, ‘Hover’ is selected here, but you can choose any option you like. 

Position

Position lets you control where the hotspot appears on the image:

Top: The hotspot appears near the top of the image.

Bottom: You’ll see the hotspot near the bottom.

Left:  The hotspot moves toward the left side.

Right: The hotspot is positioned on the right side.

For example, ‘Bottom’ is selected here, but you can choose any option you like.

Gap

Gap function controls the space between the hotspot icon and its tooltip. Here, the gap value is set to 0, but you can enter any value you like.

Alignment

The Alignment option decides where the tooltip shows around the hotspot: on the left, center, or right. For example, Center is chosen here, but you can select any option you like. 

Final Result