Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add text labels to pins #303

Open
swashbuck opened this issue Apr 29, 2024 · 6 comments · May be fixed by #304
Open

Add text labels to pins #303

swashbuck opened this issue Apr 29, 2024 · 6 comments · May be fixed by #304
Assignees
@oliverfoster
Labels
enhancement

Comments

@swashbuck
Copy link
Contributor

swashbuck commented Apr 29, 2024 •
edited

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
Copy link
Member

oliverfoster commented Apr 30, 2024 •
edited

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

hotgraphic_labels

@swashbuck
Copy link
Contributor Author

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
Copy link
Member

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

@swashbuck
Copy link
Contributor Author

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
Copy link
Member

So it could be considered a permanent tooltip?

@swashbuck
Copy link
Contributor Author

So it could be considered a permanent tooltip?

Yes, I think that makes sense.

This was referenced Apr 30, 2024
Closed
Open
@oliverfoster oliverfoster self-assigned this Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oliverfoster oliverfoster

Labels
enhancement
Projects
adapt_framework: The TODO Board
Status: Assigned
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

New: Added static tooltips adaptlearning/adapt-contrib-hotgraphic
2 participants
@swashbuck @oliverfoster