@geriux Here are some notes on the design component and how it should behave in the context of the editor, as a starting point. Keep in mind that this is a first pass, so we will likely iterate to ensure we're aligning stylistically and behaviorally with tooltips elsewhere.

⬆️ View the prototype on Figma

Visibility

In the context of SPTs, the tooltip should only be shown once, just as a subtle hint to try out the feature via the layout selection buttons.

The tooltip should appear after a slight delay (details on transitions below), and should be dismissed when the user taps anywhere outside of the tooltip, with the exception of the inline layout selection buttons — the tooltip should stay visible as the user scrolls this portion of the UI. Tapping on the canvas above, to its side, or on the keyboard should dismiss the tooltip.

Style

You can find detailed style, measurements, etc. on the design documentation. Note: we might end up tweaking the background color and shadow styling during implementation, so the documentation and our implementation might not be final.

Transitions

Entry

Tooltip fades in and slides up ~4px.

Delay: Tooltip starts entering ~500ms after the editor initially loads
Opacity: When it starts appearing, it enters from 0% opacity to 100%
Y-translation: It starts -4px down on the Y axis, relative to its end position (There is ~8px spacing between tooltip pointer and inline layout selection buttons — example)
Duration: ~300ms
Easing: easeOut

Exit

Tooltip fades out quickly in-place.

Delay: No delay
Opacity: 100% opacity to 0%
Y-translation: none — the tooltip fades out in-place
Duration: ~150ms (half the duration of the entry transition)
Easing: easeOut

Add a Tooltip for template selection buttons #2169

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions