What are mobile tooltips?

Mobile tooltips are a UI pattern that draws a user's attention to a specific area on the screen of an application. They are ideal for user onboarding, feature announcements, and contextual walkthroughs.

Floating Tooltips

Floating tooltips target an area of the screen. They work well when targeting a static portion of the app screen, such as a navigation bar item.

Floating tooltips are supported on all app frameworks, so they are a great option for Ionic users, as we don’t support those frameworks for Anchored tooltips.

Anchored Tooltips 

Anchored tooltips will target an element on the screen by using a selector to identify the targeted element. The anchored tooltip pattern is only currently available for Native iOS, Native Android, React Native, and Flutter Apps. 

What content blocks are available to add to a user’s floating and anchored tooltip patterns?

• Text
• Image/GIF
• Hero/Header
• Button
• Emoji
• Icon w/ text

What design features can users add to their floating and anchored tooltip patterns that differ from modals?

• Backdrop - Allows the user to darken the app screen behind the tooltip to draw more attention to the area the tooltip is calling out
• Drop shadow - The shadow effect behind the tooltip pattern that adds dimension to the pattern type in relation to the app screen background
• Highlight - Adds a “keyhole” aesthetic to an area or element depending on the user’s settings- the user has the ability to control the sizing and feathering effect of this design option
• Pointer - Allows the user to turn the pointer on and off, and adjust the pointer’s dimensions

How to target and adjust the placement of a floating tooltip?

On the styling sidebar, a user can click the “target” tab and use the relative position percentages, or click the “adjust target placement” button to use a cross-hair pointer and select a relative position on the preview pane. To adjust the placement, select either “top,” “bottom,” or auto - (note: this is preferred placement - if you select “bottom,” but the target is already at the bottom, the tooltip will automatically move to the top so that it fits in the screen.)

You can also adjust the distance from target by inputting a value.

How to target and adjust the placement of an Anchored tooltip?

In order to use the Anchored tooltip pattern - a screen capture must be selected or uploaded. You can click “select capture screen” on the preview pane or from the screen capture icon on the top of the sidebar.   
 

The screen capture will then populate the targetable elements that you can select from either the app screen preview or the list of selectable elements on the target tab sidebar.  
To adjust the placement, select either “top,” “bottom,” or auto - (note: this is preferred placement - if you select “bottom,” but the target is already at the bottom, the tooltip will automatically move to the top so that it fits in the screen.)

FAQ

How do tooltips progress? Can an end-user click an element to progress the flow?

Tooltips support button progression. This means that to move to the next step of the tooltip flow or to complete a tooltip flow, the user will click on a button in the tooltip.

Can an end-user interact with elements on the screen while the tooltip is currently showing?

No, the end user is not able to interact with the app functionality while a tooltip is displayed. There is an option to set the tooltip details as “tap out to dismiss,” so the tooltip flow will dismiss if the end-user clicks the screen outside the tooltip.

Are previous step button actions supported with mobile tooltips?

Yes

Will navigation steps be supported with mobile tooltips?

Yes - see documentation here

Can a user anchor an element that is off-screen? (When the end user scrolls, they will see the tooltip)

At this time, we don’t support the ability to target an element off-screen that the user would have to scroll to.

In addition, the end user can not scroll while the tooltip is showing, as they cannot interact with the app screen while a tooltip flow is presented.

Troubleshooting 

Why isn't my screen capture populating targetable elements? 

Ensure your developers have set up your app to allow common elements to be identifiable. 

Please find relevant technical documentation outlining that process below:

• iOS
• Android
• React Native   
• Flutter