booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Hotspot Image

Hotspot Image

Preview Widget
Preview Widget
Getting Started
Items Content

More Widgets

• Layered Images
• Scroll Image
• Modern Image
• Image Card Slider
Play Video

# Getting started

The hotspot image widget allows you to display your data on your images using its overlay hotspots functionality.The overlay will allow you to put information text anywhere on your images, and you can style everything from the hotspot markers to the tooltip text.

Here is how you can implement this widget in your web pages.


This section is going to be used to upload and align your image.

  • Image Align : Align your image to either left, cente..
  • Choose Image :  Select or upload an image use the wordpress media uploader.

Items Content

The items content section is where you will set up your hotspots tooltip text.You can add a new hotspot to the list by clicking on the add item at the bottom of this section.Here are the options available for each item.

  • Element Left & Top Positions : These controls will allow you to position the hotspot marker.The left positon for horizontal positioning and the top position for vertical.
  • Heading :  A title text about the part of the image that you are showcasing.
  • Short text : A description text that gives more information about the topic that you specified in the heading.
  • Tooltip Position : Select the position of the tooltip when the user hovers over the hotspot marker.


Under the styling tab section, you will have the full control over the styling & design of all you interactive icon box widget elements, you can change the sizes, colors, backgrounds...

  • Text Content Styling

Customize the text properties for the heading & short description text.

-Typography: Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements to create stylish tootips.

  • Tooltip Styling

Change the layout for the displayed tooltip and color for the background..

-Content Align : Align the tooltip content text.The options avaialable are left, center, and right.

-Tooltip Background : Customize the color for the background.Keep in mind that the tooltip background will contrast with the image.

-Tooltip Show Effect : Choose if if you want the tooltip to be displayed when user hover overs the hotspot marker or when the user clicks instead.

-Include Tooltip Triangle : Enable this if you want to use a triangle on your tooltip.This triangle will be displayed at the edge of the tooltip and will be pointed at the hotspot marker.

-Enable Box Shadow : Enable this if want to use a shadow effect for your tooltip.

  • Marker Styling

Style everything about the hotspot marker.

-Color : Change the color for both the inside content of the marker and the background.

-Marker Style : Choose one of the multiple marker styles available.You can use numbers or alphabet letters as marker or simply use a combination of colors or even a single color style.

-Marker Size & Rounded : Change the marker size and enable the rounded marker option if you want a rounded shape instead of a square one.

-Marker Animation : Choose an animation for the marker.This animation will be applied on all the markers and will give your hotspot widget extra design.Note that this animation will be repeated on a fixed amount of time.

-Marker Show Animation : Choose an animation for the first display of the marker.This animation will also be applied on all the markers but will only be displayed when the widget is loaded on your web page and will not be repeated.Note that the appearance order for the markers is based on the order of the items in the content section

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020