Review of functionality and use case
kirsty-hames opened this issue · comments
I find I'm typically using this plugin for the same use cases in courses and having to customise the plugin. I thought this would be a good opportunity to see what the common use case is and if the plugin is fit for purpose.
Popup display - native vs notify
By default, the Hint displays a native popup (_isNotifyPopup: false). I've always used the notify popup as I find this works better responsively and a better accessibility experience. I'd be in favour of removing the native popup for this reason but does anyone else use the native popup?
Note, if we do want to keep the native popup then this will need some rework for accessibility support.
Hint button positioning
Raised in #7, the DOM doesn't match the visual order. I typically see this plugin being used for question components to provide additional content to support answering a question. Based on this I would expect the button to display/read between the component display text and the interaction (.component__widget).
Does anyone else have other use cases we need to consider or thoughts on this?
Support for text and/or icon buttons
Self explanatory. The text may be content specific so being able to set a global button text (course level) or local instance (component level) would be useful too.
@swashbuck, @StuartNicholls, @guywillis and @zubairslamdien - I'd be keen to get your thoughts please.
@kirsty-hames I don't believe I've ever used this in a project, so I can't provide any typical use cases. I do kind of like the look of the popup or rather the potential to style it like a chat bubble, etc.
This is probably out of scope for this ticket, but what if you could place the Hint link anywhere you want in the text and use either the question icon or plain text for the link trigger? It would essentially be an inline tooltip. Each _items entry could be referenced with a helper within the component content like:
"body": "This shows the {{{compile hint(0, 'first hint') }}}} and this is the second hint {{{compile hint(1) }}} which uses an icon."
Which would display:
This is the first hint and this is the second hint ❓ which uses an icon.
Not sure if this is possible, is a good idea, or is already covered by the new Tooltip API / something else 😛
@kirsty-hames I don't believe I've ever used this in a project, so I can't provide any typical use cases. I do kind of like the look of the popup or rather the potential to style it like a chat bubble, etc.
This is probably out of scope for this ticket, but what if you could place the Hint link anywhere you want in the text and use either the question icon or plain text for the link trigger? It would essentially be an inline tooltip. Each
_itemsentry could be referenced with a helper within the component content like:"body": "This shows the {{{compile hint(0, 'first hint') }}}} and this is the second hint {{{compile hint(1) }}} which uses an icon."Which would display:
This is the first hint and this is the second hint ❓ which uses an icon.
Not sure if this is possible, is a good idea, or is already covered by the new Tooltip API / something else 😛
Hey @swashbuck, the functionality you've described sounds like the Definitions plugin. This does use notify to display a popup but we've typically styled this smaller that other notify popups used within the same course. Potentially you can do something similar with the tooltip API also but I'm yet to use this outside of the navigation bar.
Todo:
- Switch to notify only with text + graphic in schema
- Position under component header and before widget
- Allow button text +/ icon
Todo:
- Switch to notify only with text + graphic in schema
- Position under component header and before widget
- Allow button text +/ icon
After further discussion...
- remove items (only single title and body are used)
🎉 This issue has been resolved in version 3.1.0 🎉
The release is available on GitHub release
Your semantic-release bot 📦🚀