Using tooltips

Tooltips can be used to provide definitions of complex or technical words

Introduction

Tooltips can be added to forms to explain words which are complex or difficult to understand.

An example of a tooltip being used to explain the meaning of the word 'complex'

It is best practice to use Tooltips sparingly and keep the descriptions short so they render well on smaller devices such as tablets and phones

Step 1

The first step is to provide definitions of any complex words in the form 'Glossary'

The 'Glossary' is visible in the left hand column in the form definition menu

Screenshot showing 'Glossary' in the Form Definition menu

Step 2

Select 'add new term' and give the term a unique name

Screenshot showing the input feild for a new glossary term

The glossary term name must be unique, in small characters and no spaces

Step 3

Once you have defined a word in the form glossary you can add a Tooltip in the form itself.

Tooltips can be located in various places in a form including in a section title, a question label or a question option.

Screenshot showing a tooltip being added to a redio button label to explain the word 'participate'

Screenshot showing how the tooltip appears when the word 'participate' receives focus

Step 4

Tooltips must be written in the following way:

<pwi-form-tooltip term=participate position=top>participate</pwi-form-tooltip>

Section	Description
<pwi-form-tooltip	Opening parenthesis
term=participate	Refers to the term name as defined in the form glossary. In this example the term name is 'participate'
position=top	Indicates where the tooltip should appear. If not mentioned, the app will automatically determine the positioning
>participate<	The word in the form which is having a tooltip attached to it
/pwi-form-tooltip>	Closing parenthesis

Step 4

Once you have added your Tooltip you can go to the 'Test' mode to test how it is working.

Screenshot showing a tooltip being tested in the 'test' mode

Step 5

It is possible to change the positioning of the Tooltip. In the example above we set the position as 'top'. However 'bottom', 'left' and 'right' are also possible options.

If a position is not mentioned, the app will determine the position automatically.

Step 6

Tooltip's can be added to option labels as shown below:

Screenshot showing a tooltip being added to decribe the word 'Appples'

To add s Tooltip to an options label you must toggle on the 'Advanced' mode and select the option 'allow options to be written in markdown' as shown below:

Screenshop showing how to add tooltips to option labels

Congratulations! You now know how to add Tooltip to explain words that are difficult to understand