Media · Gutenberg
Hotspot Image block for WordPress
Image with interactive hotspot pins that reveal tooltips on hover or click.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Image with interactive hotspot pins that reveal tooltips on hover or click.
Inspector panels on this block: Image, Hotspots. Those titles come from index.js, not from a shared template.
Behavior controls: “Tooltip Position” options: Right, Left, Top, Bottom; “Trigger” options: Hover, Click; “Marker Style” options: Pulse, Dot, Plus.
Where to find it
Gutenberg inserter → Media → search “Hotspot Image” (block name `blockenberg/hotspot-image` in block.json). Style it in the sidebar after insert.
How to use Hotspot Image block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Hotspot Image”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image. Set “Title”, “X Position (%)”, “Y Position (%)”, “Tooltip Position”.
- Check the published page. The view script reads HTML data attributes: data-trigger. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Title | Text field in the inspector. |
| Content | Multiline text field in the inspector. |
| X Position (%) | Numeric range control in the inspector. Range 5–95. |
| Y Position (%) | Numeric range control in the inspector. Range 5–95. |
| Tooltip Position | Select control; the chosen value is saved on the block. Options: Right; Left; Top; Bottom. |
| Trigger | Select control; the chosen value is saved on the block. Options: Hover; Click. block.json default: hover. Saved as `trigger`. |
| Marker Style | Select control; the chosen value is saved on the block. Options: Pulse; Dot; Plus. block.json default: pulse. Saved as `markerStyle`. |
| Marker Size (px) | Numeric range control in the inspector. Range 10–40. block.json default: 18. Saved as `markerSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Marker Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `markerColor`. |
| Tooltip Background | Color control in the inspector. block.json default: #1e1e2e. Saved as `tooltipBg`. |
| Tooltip Text | Color control in the inspector. block.json default: #ffffff. Saved as `tooltipText`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-trigger.
When this is the right block
- Image with interactive hotspot pins that reveal tooltips on hover or click — that is the job of Hotspot Image, not a generic content block.
- Use it when you need the editor control labeled “Title”, which exists on this block’s inspector.
- It matches pages about hotspot, image, pin.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Hotspot Image block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Hotspot Image”. It sits under Media. After insert, open Image and set “Title”, “X Position (%)”, “Y Position (%)”, “Tooltip Position”.
What makes Hotspot Image different from other Blockenberg blocks?
Image with interactive hotspot pins that reveal tooltips on hover or click. Inspector labels on this block include “Title”, “X Position (%)”, “Y Position (%)”, “Tooltip Position”.
Is the Hotspot Image Gutenberg block free?
Yes. Hotspot Image ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Hotspot Image to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Hotspots).
Related media blocks
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Box
A clickable image card with overlay title, hover effects, and a link.
Image Filter
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Image Magnifier
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
Image Mask
Display an image through a decorative shape mask — circle, hexagon, blob, star, diamond, cross, heart, or pentagon.
Image Overlap Text
Creative editorial layout where a large image bleeds into an adjacent text column with decorative accents.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Hotspot Image from the Gutenberg inserter.