Connect markers to visual details

Image Hotspot Pro places annotation pointers on images, maps, and video content in WordPress. Visitors can hover over or click a pointer to open its tooltip or pop-up and view related text, images, videos, or links. YouTube and Vimeo videos can appear directly on your site.

Use markers to identify product parts, explain map locations or diagram elements, add context to an infographic, or make a content exploration activity or interactive assessment. Each annotation ties information to a specific point in the visual.

Choose and style pointers

Pointers can use Font Awesome icons, custom images or icons, or text. The plugin includes more than 1,600 built-in Font Awesome icons. Icon settings include color, hover color, size, and hover icon settings. Custom image and icon pointers have options for their hover image or icon and size. Text pointers can be styled with font size, font color, and background color.

Markers can be repositioned by dragging, edited, or removed. Choose hover or click behavior for revealing content. Tooltip content can include links, and the available presentation options include built-in templates, embedded codes, and custom code. Custom templates can use HTML and CSS.

Place image maps in WordPress

Use unlimited shortcodes to place image maps in posts, pages, widgets, theme areas, and page-builder layouts. The extension works with current themes and page builders, enables multiple instances on the same page, and is responsive for mobile devices. Custom CSS can adjust the presentation further.

Create an annotated visual

1. Install and activate Image Hotspot Pro in WordPress.
2. Create an image hotspot layout and add the image or visual to annotate.
3. Add pointers using icons, custom images, or text.
4. Set pointer styling and add tooltip content, such as text, images, videos, or links.
5. Choose whether hover or click reveals the content, then place the result in a post, page, widget, theme area, or page-builder layout with a shortcode.

Preview the layout and adjust marker positions, colors, sizes, and fonts. Add custom CSS if you need further presentation changes.