web_infography_spot Shortcode
The web_infography_spot shortcode renders the interactive Infography spot component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed parent shortcodes: web_interactive_infography.
Usage
[web_infography_spot title="Point information"]<p>Describe the point.</p>[/web_infography_spot]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
spot_mode |
tooltip-mode |
tooltip-mode, link |
Controls the spot mode. |
spot_action |
url |
url, modal, ajax, slider |
Choose whether the spot opens a URL, modal, dynamically loaded page, or slider action. Available when spot_mode is link. |
spot_url |
— | String unless stated otherwise | Enter the url to which you will direct when clicking the button. Available when spot_action is url. |
spot_url_target |
— | yes |
Open link in another window. Available when spot_action is url. |
spot_modal_id |
— | String unless stated otherwise | Enter the modal box ID which will be triggered when clicking the button. Available when spot_action is modal. |
spot_ajax_page |
— | A value selected from WordPress | Choose the page to display via AJAX. Available when spot_action is ajax. |
spot_slider_id |
— | String unless stated otherwise | Enter the Slider ID you want to manage. Available when spot_action is slider. |
spot_slider_action |
next |
next, previous, custom |
Controls the slider action. Available when spot_action is slider. |
spot_slider_custom_slide_id |
— | String unless stated otherwise | Controls the custom slide id. Available when spot_slider_action is custom. |
aria_label |
— | String unless stated otherwise | Set label for accessibility. |
title |
— | String unless stated otherwise | Title for the tooltip. Available when spot_mode is tooltip-mode. |
icontype |
dot |
dot, number, image |
Controls the display the hotspot with:. |
hotspot_image |
— | String unless stated otherwise | Select the image to be displayed. Available when icontype is image. |
position_y |
25% |
String unless stated otherwise | Controls the icon position y. |
position_x |
25% |
String unless stated otherwise | Controls the icon position x. |
color |
1 |
Numeric palette slot 1–15 | Uses the theme's background-color helper. |
ispulse |
yes |
yes, no |
Controls the display pulse animation for the hotspot icon?. |
arrowposition |
top |
top, right, bottom, left |
Preferred tooltip position, available in tooltip-mode. |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
index |
Derived by parent | Zero-based integer | The parent assigns order across all points. Number markers display index + 1. |
Enclosed content supplies safe tooltip HTML. URL actions support ordinary HTTP(S), mail and telephone links; new tabs use safe relationship attributes. Missing or invalid action targets stay inactive. AJAX destinations must be publicly viewable and password-free; their permalink is resolved at render time. Modal and Slider IDs must identify elements on the same page.
Coordinates use the marker's top-left corner. Existing safe Legacy percentage, pixel and relative-length values remain supported, including intentional offsets beyond the image. Gutenberg's visual positioning controls use 0–100%. Marker images use current library metadata or a valid public image URL. Pulse motion respects reduced-motion preferences.
Verification
Keep web_infography_spot inside web_interactive_infography; verify the child order and the parent interaction on the public page. Pay particular attention to spot_mode and spot_action.
On pointer-based devices, a tooltip-mode spot remains open for one second after the pointer leaves the spot. Moving into the tooltip during that grace period keeps it open. Keyboard focus also opens it; Escape dismisses it. Touch-oriented devices use persistent click interaction. Opening another point or clicking outside dismisses the previous tooltip.