Aisol Hotspots

Aisol Hotspots puts numbered points on any image and keeps them in place at every screen size. Positions are percentages of the image (X 0 = left edge, Y 0 = top edge).

Each point is a button named after its title. Click, tap, Enter or Space opens its popover; Escape closes it and keeps focus on the point. Moving focus to another point or out of the component, or clicking elsewhere in it, closes the popover, so only one is open at a time. The popover sits right after its point in the tab order, so its link is reachable with Tab. Buttons carry aria-expanded and aria-controls, and ids are unique per instance.

Popovers are measured and kept inside the image: above, below or beside the point, and on a small image they shrink and scroll rather than spill out or cover their own point.

On phones choose a numbered list under the image or keep the popovers.

- Image control accepts a CMS image field

- Per point: X %, Y %, Title, Body, Link and its own link text

- Opens on click or hover (hover also opens on keyboard focus)

- Dot size, colours, ring, pulse, numbers

- Popover width, colours, radius and a body line limit

- Honours reduced motion

- Listens only on its own element; no window or document listeners