| description |
|---|
Tooltips can be used to provide definitions of complex or technical words |
{% hint style="info" %} Tooltips can be added to forms to explain words which are complex or difficult to understand. {% endhint %}
%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png)
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
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
 (1).png)
Screenshot showing 'Glossary' in the Form Definition menu
Select 'add new term' and give the term a unique name
%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(2).png)
{% hint style="warning" %} The glossary term name must be unique, in small characters and no spaces {% endhint %}
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.
 (1) (1) (1) (1) (1) (1) (1) (1).png)
Screenshot showing a tooltip being added to a redio button label to explain the word 'participate'
 (1) (1) (1) (1) (1) (1).png)
Screenshot showing how the tooltip appears when the word 'participate' receives focus
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 |
Once you have added your Tooltip you can go to the 'Test' mode to test how it is working.
 (1) (1) (1) (1) (1).png)
Screenshot showing a tooltip being tested in the 'test' mode
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.
Tooltip's can be added to option labels as shown below:
 (1) (1) (1).png)
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:
 (1) (1).png)
Screenshop showing how to add tooltips to option labels
{% hint style="success" %} Congratulations! You now know how to add Tooltip to explain words that are difficult to understand {% endhint %}