Mariano Guerra
Follow

my solution to the touch tooltip/more info thing:

I add data-ui-action="<id>" to elements I want to attach extra info. when the info icon is selected I do querySelectorAll('[data-ui-action]') and with getBoundingClientRect I overlay a glowing box to all visible actions with a click handler that calls a callback with the action id, there I can show a popover or open the documentation for that action :)

vis.social/media/FNN_8Snc8bles

@marianoguerra this is a really compelling idea and neat UI trick.

@scott thanks! I find it useful because it allows the user to ask the UI for interactive elements (some UI designs make it hard to know what's interactive) and also to get extra information about them (even on touch devices) without requiring much change to the code (an extra action-id attribute only, event handling can be done somewhere else)

@scott also it avoids the need for a linear (and usually run once) feature tour. The user can activate it whenever she wants and jump straight to the part she wants to know more about. Also it inverts the documentation navigation, you can jump straight to the document you want from the UI.

Sign in to participate in the conversation
vis.social

A social space for anyone in data, visualization, creative coding, and related arts and research. Share your work, discuss, critique, and ask for help! Come one, come all:

→ creative coders
→ data scientists and visualizers
→ generative artists
→ visual researchers, curators, and critics
→ anyone else data- or visualization-adjacent

If you are curious about the world and creativity, you are welcome here. Learn more.