Add Image Hotspot Widget In Elementor With Tooltip

It’s easy to create an image map using Elementor with Image hotspot widget. Image hotspot with tooltip helps the audience to get a clear idea of your media file. Sometimes it’s impossible to explain in detail with text. Then you can get help from an image hotspot toggle widget. You can play with Master Addons tooltip for a better webpage structure too. 

There are a few hotspot plugins available for WordPress in the plugin directory. I will explain how to add image hotspot inside Elementor Page builder. Check this post and you will get a video guideline within this post. It will help you to create your image hotspot within a few minutes.

I highly recommend you to check main demo for image hotspot. Make sure that it’s only available on Master Addons pro version. You may love to check different types of Elementor Backgound and some best elementor elements usage too.

Let’s see how to add image hotspot in elementor using Master Addons Plugin. If you haven’t downloaded this free plugin yet then visit Master Addons WordPress plugin page and download it. You can check the plugin installation guide to get a better knowledge of installation and configuration. 

Image Hotspot Widget in Elementor

Le’ts check how to add image hotspot system in WordPress website. First search for MA Image hotspot element. You will see this element inside the Master Addons element library. Then Drag this Element to your elementor page editor. There is an option to choose an image. Click on the image icon and upload your image inside WordPress media and finally insert it in your image hotspot.

Image Hotspot Widget In Elementor

After adding an image inside the hotspot element you can select image size, and define alignment. Under Image option, you will see Hotspots, and Tooltips panel.

Hotspot Content & Style 

Click on Hotspots and you will see content, Style, and Position tabs. In the content area, you can define the hotspot type. There are two types of hotspots available, Text, & icon. After selecting Icon, it will let you choose your desired icon. You are free to place a link if necessary. Then the tooltip content area. Type text or add image, video inside this area.

Navigate to style tab and select default color, BG color, Opacity and Hover color, BG color, Opacity.

Image Hotspot with tooltip style 1

The next tab is the position. Place your hotspot anywhere using Horizontal, and Vertical position value. Select where you like to show your tooltip in the hotspot. There are top, bottom, left, and right values available.

 Image Hotspot Tooltip

The last option in content is Tooltips. This customization is set to global. If you don’t want to customize each hotspot tooltip manually, then you can do tooltip customization from this option. Define the maximum width if you need to place long tooltip content with image. Sometimes it’s necessary to hide tooltip in a mobile, tablet. Use diable on option to do this responsive job. Hide tooltip arrow from arrow option.

image hotspot with tooltips

Image Hotspots Style

Image: Manage the hotspot image opacity, Border, Border Radius, Box Shadow, and CSS filters.

Hotspots: You can disable the pulse effect and manage hotspot default + hover opacity, size, color, BG color, Border, and box-shadow. There is a typography option which allows you to select a perfect typo for your hotspot point.

Tooltips: It has the same options as Hotspots. But tooltip has no hover system. You can arrange the border-radius, alignment from this option too.

Image Hotspot tooltip widget style

That’s all about adding Image hotspot widget with tooltip in your Elementor Page editor. This is a pro feature of Master Addons Plugin. Master Addons for Elementor plugin has some other unique feature. I recommend you to navigate the demos menu and check details.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms