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)

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.