Add a Tooltip for template selection buttons

[pinarol]

We need to add a Tooltip to point to the template selection buttons.

[iamthomasbishop]

@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