Media · Elementor
Image Hotspots widget for Elementor
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Image Hotspots”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Image Size”, “Border”, “Box Shadow”. Style and Content tabs are listed on this page.
When to use it
- A product callout on a photo.
- A floor plan.
- An infographic with notes.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Image — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Image — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-image-hotspots-image`. |
| Image — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-hotspots-image`. |
| Image — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| kng_img_hotspots_hotspot_items (Content) — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| kng_img_hotspots_hotspot_items (Content) — Icon Text | Text inspector control (`kng_img_hotspots_hotspot_icon_text`). |
| kng_img_hotspots_hotspot_items (Content) — Icon Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| kng_img_hotspots_hotspot_items (Content) — Reverse Icon Position | Reverse icon position for this hotspot instead of global from the Style tab. |
| kng_img_hotspots_hotspot_items (Content) — Custom Icon Size | Use custom icon size for this hotspot instead of global from the Style tab. |
| kng_img_hotspots_hotspot_items (Content) — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 15, min 0). |
| kng_img_hotspots_hotspot_items (Content) — Custom Colors | Use custom colors for this hotspot instead of global from the Style tab. |
| kng_img_hotspots_hotspot_items (Content) — Icon & Text Color (optional) | Writes CSS (color, fill) onto the widget’s front-end markup. |
| kng_img_hotspots_hotspot_items (Content) — Background Color | Writes CSS (background-color, king-addons-hotspot-item) onto the widget’s front-end markup. |
| kng_img_hotspots_hotspot_items (Content) — Tooltip | Switcher inspector control (`kng_img_hotspots_hotspot_tooltip`). |
| kng_img_hotspots_hotspot_items (Content) — Always show tooltip | Switcher inspector control (`kng_img_hotspots_hotspot_tooltip_always_show`). |
| kng_img_hotspots_hotspot_items (Content) — Kng Img Hotspots Hotspot Tooltip Content | Wysiwyg inspector control (`kng_img_hotspots_hotspot_tooltip_content`). |
| kng_img_hotspots_hotspot_items (Position) — Horizontal Position (%) | Writes CSS `left` onto the widget’s front-end markup. (min 0, max 100). |
| kng_img_hotspots_hotspot_items (Position) — Vertical Position (%) | Writes CSS `top` onto the widget’s front-end markup. (min 0, max 100). |
| Hotspots — Kng Img Hotspots Hotspot Items | Repeater rows; render() loops each item to build the list or slides. |
| Hotspots — Icon & Title Color (optional) | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Hotspots — Background Color | Writes CSS (background-color, king-addons-hotspot-item) onto the widget’s front-end markup. |
| Hotspots — Pulse Animation | Switcher inspector control (`kng_img_hotspots_hotspot_item_animation`). |
| Hotspots — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-hotspot-content`. |
| Hotspots — Title Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-hotspot-icon-text`. |
| Hotspots — Position | Options: Left; Right. |
| Hotspots — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 15, min 0). |
| Hotspots — Box Minimum Width | Writes CSS `min-width` onto the widget’s front-end markup. (default 40, min 0). |
| Hotspots — Box Minimum Height | Writes CSS `min-height` onto the widget’s front-end markup. (default 40, min 0). |
| Hotspots — Space between icon and title (px) | Writes CSS (king-addons-has-hotspot-icon-text, margin-right, margin-left) onto the widget’s front-end markup. (default 10, min 0). |
| Hotspots — Box Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Hotspots — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Hotspots — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Hotspots — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Hotspots — Border Radius | Writes CSS (border-radius, king-addons-hotspot-item) onto the widget’s front-end markup. |
| Tooltips — Appearing Animation | Options: Simple; Shake; Double Shake; Stretch; Floating. |
| Tooltips — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Tooltips — Background Color | Writes CSS (background-color, king-addons-hotspot-tooltip-content, border-top-color) onto the widget’s front-end markup. |
| Tooltips — Tooltip Width | Writes CSS `width` onto the widget’s front-end markup. (default 150, min 50). |
| Tooltips — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-hotspot-tooltip-content`. |
| Tooltips — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-hotspot-tooltip-content`. |
| Tooltips — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Tooltips — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Image Hotspots actually change on the page?
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map. Inspector labels from this widget’s PHP include “Image”, “Image Size”, “Border”, “Box Shadow”.
How do I add Image Hotspots in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Image Hotspots”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Vertical Scrollable Image
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
Google Maps
A map with marker and style controls for a location or directions block.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Image Hotspots after you activate it.