Add Tooltips

 Why would you add a tooltip?

By using a tooltip, end users can see the contents of the tooltip by hovering their cursor over the text that requires more information or clarity. 

For example, you may want to clarify that an “Employee” is “An individual who works part-time or full-time under a contract of employment, whether oral or written, expressed or implied, and has recognised rights and duties.”

 

What’s the difference between a tooltip and a tip?

Tooltip:

There are many use cases for tooltips and tips. Tooltips are attached to a specific bit of text, showing its contents only if the user hovers over the text. Therefore,  tooltips can be used to (but not limited to) add quick definitions for any words used in your App.

Screen_Shot_2020-05-07_at_8.44.29_am.png


Tip:

On the other hand, tips are displayed on the right-hand side inside an Assessment and can also be used to (but not limited to) define terminology or provide guidance for users.


Studio_Fundamentals_-_Google_Docs_2020-07-28_10-09-35.png



How to add a tooltip

  1. Inside the rich text editor of Paragraphs in the FORM block, select the text you want to add a tooltip to (E.g. “Employee”)

    V1.15_Release_Notes___Email___Wiki_-_Google_Docs_2020-05-07_08-40-34.png


  2. Click onto the tooltip icon in the toolbar of the rich text editor

    V1.15_Release_Notes___Email___Wiki_-_Google_Docs_2020-05-07_08-41-16.png


  3. Add the tip you would like to show when users hover over the text and click onto the tick icon to save changes

    For example, content for “Employee”:
    "An individual who works part-time or full-time under a contract of employment, whether oral or written, expressed or implied, and has recognised rights and duties"

    Screen_Shot_2020-05-07_at_8.43.03_am.png


  4. The text selected for the tooltip will now have a dotted underline and will show the tip when hovered over with the cursor. See below screenshot

    Screen_Shot_2020-05-07_at_8.44.29_am.png