I have a screenshot of our Learning Management System, which contains some ‘hot points’ signposted with pulsing pins. Once people hover their mouse over those pins, I want a tooltip with a quick explanation to appear over it — similar to what Heroku has done in the example above.
I work for a university and instead of writing long documents explaining the various options in the LMS, I wish to create interactive elements like the one above which can be embedded in our support pages.
you can do it with HypePro only, without external code, maybe only a bit of CSS for the responsive behavior.
you need to build a scene with a static background and some POI+ pop-ups elements with timeline ( better through symbols ).
The layout must be responsive? (readable with a phone)
Ideally I wanted this to be responsive. But I’m using a screenshot from a page which is partially responsive. So not much I can do about it at the moment.
Feel free to have a look. Any feedback greatly appreciated.
If you’re working with a screenshot, there’s not much you can do except scale it as part of a flexible layout.
My main bit of feedback would be to either have a way to manually advance when showing the steps or to have a progress meter; 10 seconds was a long amount of time and I wasn’t sure if something was wrong.
Haha, that’s clever use of UI! You may want to change the timing function on the progress meter to be “linear” so it progresses at an even rate and doesn’t ease while starting/stopping.