The Hotspots Widget helps you to display tooltips or annotations on your images in an interactive way. Each host spot can be placed by x and y coordinates exactly where you want to place it on your background image. It also supports remote connection and syncing with other widget.
Let’s look at each of the options in the “Hotspots Widget” below.
Install Hotspots Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Hotspots”
- Hover over the widget in the search results and click install
- Add your “Hotspots” widget to any Elementor Page
General Settings #
Image
Choose image to display.
Trigger
Select option to trigger hotspot.
- Hover
- Click
Enable popup on click
Enable/disable popup on click.
Show Popup Image
Show/Hide popup image.
Connect Widget Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Hotspots Settings #
Title
Type text to show as title.
Hotspot Source
Select the hotspot source.
- Title
- Icon
Link
Type or paste your URL to link with hotspot.
Tooltip Text
Type text to show as tooltip.
Style
Set the horizontal and vertical placement, background and ripple color.
Popup
Set popup title, popup image, and popup long text.
Hotspots Widget Styling #
Set the spot size, radius, background, color, typography, icon size, and tooltip color.
Popup Styling #
You can style the popup title background, text color, title padding, overlay background, and popup width.
Usage Examples #
Here are some live use cases for the Hotspots widget.
Hotspots widget synced with card carousel.
