Canvas Docs

Image Hotspots

Interactive image with positioned hotspot pins that reveal tooltips on hover or click. It is shown in the block inserter as Canvas Image Hotspot and registered as canvas-core/image-hotspot.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Image Hotspots settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Image ClassesDefaultEmpty

    Classes on the image itself, for designs that size or scale it with a utility.

  • Pin GlyphDefaultOn

    Draw a label or icon inside each pin. Turn off for designs whose pins are a bare pulsing dot.

  • TriggerDefaultHover

    What opens a tooltip. Click is the safer choice, since hover cannot be used on a touch screen.

    ChoicesHoverClick

Image

  • Background ImageDefault0

    Picture the markers are pinned onto, such as a room, a map or a product shot.

Hotspots

  • HotspotsDefaultEmpty

    The markers pinned on the picture. Each one carries a tooltip a visitor opens by hovering or clicking.

    Each row of Hotspots takes:

    • X PositionDefault50

      Horizontal position in pixels, measured on the image at its own full size.

    • Y PositionDefault50

      Vertical position in pixels, measured on the image at its own full size.

    • Circle LabelDefaultEmpty

      Short text inside the marker itself, usually a number.

    • IconDefaultEmpty

      Glyph inside the marker, used in place of the text above.

    • TitleDefaultEmpty

      Heading at the top of the tooltip this marker opens.

    • ContentDefaultEmpty

      Body of that tooltip, under the heading.

    • Tooltip PositionDefaultDefault

      Where the tooltip opens relative to its marker. On Top helps for a marker near the bottom edge of the picture.

      ChoicesDefaultOn Top

    • Tooltip Content (rich)DefaultEmpty

      Replaces the Title/Content body with your own markup.

    • Tooltip Width (px)Default0

      0 uses the stylesheet default.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?