Hotspot
Points on a picture that say what is there.
On this page
A hotspot puts points on a picture that say what is there: the parts of a product, the places on a plan, the things worth noticing in a screenshot. The hotspot is the frame around the picture, and each pin is a button placed on it in percent. A pin opens what a button opens, so a popover needs no script.
Hotspot
<figure class="figure hotspot w-full max-w(480)"> <img class="figure-media" src="/demo/moonstone.svg" alt="A pale stone hanging over two ranges of grey hills" style="--figure-ratio: 16 / 9"> <button class="hotspot-pin" type="button" style="--x: 72%; --y: 32%" popovertarget="spot-stone" aria-label="The stone">1</button> <button class="hotspot-pin" type="button" style="--x: 30%; --y: 62%" popovertarget="spot-hills" aria-label="The far hills">2</button> <div class="popover" id="spot-stone" popover> <p class="m(0) fg-text-strong font-medium">The stone</p> <p class="m(0) fg-text-muted">Moonstone, lit from above and slightly left, as every surface in the theme is.</p> </div> <div class="popover" id="spot-hills" popover> <p class="m(0) fg-text-strong font-medium">The far hills</p> <p class="m(0) fg-text-muted">One step of the same grey lighter than the near ones.</p> </div></figure>#Placing a pin
hotspot makes the element around the picture as wide as the picture and the reference for its pins. Each hotspot-pin sets --x and --y in its style, in percent of the picture's width and height from its top left corner, and the pin's middle stands on that point. Percent keeps a pin on its place at any size of the picture.
A pin is a <button>, or a link when it goes somewhere. With popovertarget it opens a popover, which the browser places against the pin where anchor positioning is supported and in the middle of the viewport elsewhere. With interestfor it shows a tooltip on hover and focus.
#The pin
A pin is a 24px disc of ink with a white rim and a dark shade outside the rim. The rim and the shade are the same in both themes, since a picture has no theme: between them a pin is found on a light picture and on a dark one. It may hold a number, which ties it to a list of the same points in the text, or nothing.
A ring leaves the pin every few seconds, to say it can be pressed. With reduced motion the ring rests. On a touch screen the pin keeps its size and its target grows to 44px.
Without numbers
<figure class="figure hotspot w-full max-w(360)"> <img class="figure-media" src="/demo/moonstone.svg" alt="A pale stone hanging over two ranges of grey hills" style="--figure-ratio: 16 / 9"> <button class="hotspot-pin" type="button" style="--x: 72%; --y: 32%" popovertarget="plain-stone" aria-label="The stone"></button> <button class="hotspot-pin" type="button" style="--x: 22%; --y: 78%" popovertarget="plain-hills" aria-label="The near hills"></button> <div class="popover" id="plain-stone" popover>The stone the light theme is named for.</div> <div class="popover" id="plain-hills" popover>The near hills, in the ink of the page.</div></figure>#Accessibility
- Every pin needs an accessible name that says what it points at:
aria-label="The arm", not "Pin 1". A number inside the pin is not a name. - Pins are reached with Tab in the order they are written, so write them in the order a reader would look, not in the order they were added.
- The picture's
altdescribes the whole picture. What the pins say must also be available without them: list the same points under the picture, numbered the same way. - Keep pins at least 44px apart on a picture that may be seen on a phone, so two targets never overlap.
#Classes
| Class | Description |
|---|---|
hotspot | The frame around a picture, as wide as the picture: pins are placed against it |
hotspot-pin | One pin, on a button with an accessible name: a 24px disc of ink with a white rim, whose middle stands at --x and --y. It may hold a number. A ring leaves it now and then, and rests while the pin is under the pointer or has focus |
#Custom properties
| Property | Default | Description |
|---|---|---|
--x | The pin's place across the picture, in percent from its left edge. On hotspot-pin | |
--y | The pin's place down the picture, in percent from its top edge. On hotspot-pin |