WP Manifestindependent plugin directory
manifest / media / image-hotspots

PhilDesigns Image Hotspots

Add clickable hotspot markers to images using ACF Pro repeater fields with customisable tooltips and marker styles.

by PhilDesigns · github.com/phil-designs/image-hotspots · website

★ 1stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/phil-designs/image-hotspots/archive/refs/heads/main.zip
Readme github.com/phil-designs/image-hotspots ↗

Add clickable hotspot markers to any image using ACF Pro. Customisable tooltips, marker styles, and an [image_hotspot] shortcode.

Tags: image, hotspot, acf, tooltip, interactive Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 7.4 License: GPL-2.0-or-later

Description

Image Hotspots lets you place interactive markers on any image and attach rich tooltip content to each one. Visitors click or tap a marker to reveal a tooltip containing a heading, optional image, and a WYSIWYG description.

Requires Advanced Custom Fields PRO (paid plugin). The plugin uses ACF Pro repeater fields to store marker data.

Features:

  • Click on the image in the admin to visually position markers — coordinates set automatically
  • Numbered markers — optionally display a badge on each marker
  • Two marker types: FontAwesome 5 icon or a custom image from your media library
  • Colour picker controls for marker colour, hover colour, tooltip background, and tooltip text
  • Custom CSS field for full style overrides
  • Single [image_hotspot id="X"] shortcode to embed anywhere

Requirements

  • WordPress 6.7 or higher
  • PHP 7.4 or higher
  • Advanced Custom Fields PRO (required)

Website

https://phildesigns.com

Installation

  1. Ensure Advanced Custom Fields PRO is installed and activated.
  2. Upload the image-hotspots folder to /wp-content/plugins/
  3. Activate the plugin through the Plugins menu in WordPress
  4. Go to HotSpots → Settings to configure marker and tooltip styles

Usage

  1. Go to HotSpots → Add New HotSpot and give it a title.
  2. Upload the background image in the HotSpot Image field and save.
  3. Reload the page — the interactive placement preview appears. Click the image to place markers.
  4. Fill in the label and description for each marker row.
  5. Copy the shortcode from the Use This HotSpot meta box and paste it into any page or post.

Changelog

1.0.0

  • Initial release