Add text labels to pins

[swashbuck]

Subject of the enhancement

We commonly customize Hot Graphics to show a text label by each pin. This would be a useful option when using either pin icons or pins as images (see below).

The position of each pin labels should be flexible. So, we would want options for top and bottom plus left and right.

Currently, we can just add the text to the pin graphics themselves. However, this complicates localization since the graphics would need to be updated for additional languages.

Screenshots

Using pins

Using pins as images

Suggested configuration for an item

The new properties label and _labelAlignment would appear under _pin. _labelAlignment would default to bottom.

{
    "_left": 25,
    "_top": 25,
    "title": "Hotspot 1 title",
    "body": "This is display text 1.",
    "strapline": "Hotspot 1 strapline",
    "_imageAlignment": "right",
    "_classes": "",
    "_graphic": {
        "src": "course/en/images/example.jpg",
        "alt": "",
        "attribution": "Copyright © 2019",
        "_classes": ""
    },
    "_tooltip": {
        "_isEnabled": false,
        "text": "{{ariaLabel}}"
    },
    "_pin": {
        "src": "course/en/images/example.jpg",
        "alt": "",
        "label": "Pin label",
        "_labelAlignment": "top|bottom|left|right"
    }
},

[oliverfoster]

How does it scale onto mobile? Does the text size shrink also?

[swashbuck]

How does it scale onto mobile? Does the text size shrink also?

@oliverfoster We could reduce the font size and label padding for mobile. This could also be managed on the design/AD end to ensure that hotspots are far enough apart and that there aren't too many hotspots (e.g. no more than 3 or so). Typically, we switch to Narrative or a static image for mobile views, though.

[oliverfoster]

Why for pin images only and not for normal pins?
Would you expect the tooltip and label to work together?

[swashbuck]

Why for pin images only and not for normal pins? Would you expect the tooltip and label to work together?

@oliverfoster No, this would be for both pin types (see the apples & oranges screenshot above).

I think if we have a label, we would not have a need for a tooltip. To me, the purpose of the tooltip is to explain an icon or image when no text is present. I could be convinced otherwise, though.

[oliverfoster]

So it could be considered a permanent tooltip?

[swashbuck]

So it could be considered a permanent tooltip?

Yes, I think that makes sense.