Easily create image hotspots that can be added manually or dynamically using ACF repeater fields. Supports allowing users to navigate between different markers, for creating ‘hotspot tours’ to help walkthrough product features.
The element comprises of two separate parts, the hotspot element itself which is the container for the image and all of the markers, and then the individual markers inside of it. Most of the functionality is controlled at the marker level, but the hotspots element also has a few options.
Image – Choose the image and image size of the image you are wishing to add the hotspots to. This can be taken from the media library or added via dynamic data.
Add Markers – The markers can be added, deleted and edited directly from the hotspots option pages. If not adding the markers dynamically, simply add as many markers as you need and then click the edit button to edit the settings.
Allow navigation between hotspots – if you are intending to add buttons inside of the popups, enable this setting and provide the selectors of the buttons. eg ‘.next’ is the default for the next button. This is the class to then add to the button inside of the popup inside of the marker component.
Positioning Type – Choose to position each marker manually, or if using repeaters you can also populate the positioning dynamically using a custom field in the format X%,Y%.
Inside the marker tab you can change the icon, choose to add a label and there are some common style settings there for convenience (not that full access to styles is always going to be inside of the styling tab)
General styles for the content that pops up when the marker is interacted with.
Offset Skidding – Change the position of the popup along the side of the marker in which it will appear.
Offset Distance – Add spacing between the edge of the marker and the popup position
Preferred Popup Placement – By default the popup will appear where it has room to do so, the auto setting will ensure that across different devices there is always space. However, if you need to force it into a certain direction you can do with this setting.
User Interaction to Open – ‘Click’ ensures a click and tap will open the popup. If you’re wanting to open on hover, use ‘mouseenter click’, this way on desktop the hover will trigger it, but on mobile the user can still tap to open.
The animated shadow pulses can be customised, change the color, size, duration and how many pulses are visible. You can also remove the pulse when the popup is open and the marker is active.