The explain decorator can be applied to question options, table columns, and table rows to add an "info" icon that displays a tooltip to respondents when hovered over or tapped.
Tip! To display tooltips at the question level or with a set text widget, use the explain tag.
Details
- The
explaindecorator can be added after option text. - The
explaindecorator can be used like option data and be piped into atextdecorator with the[explain]placeholder (e.g.,{text: [explain]}. -
Explain tooltips follow options wherever the list is used. Use the
showexplain,showexplaincol, orshowexplainrowtags to hide them for options, columns, and rows, respectively. - When an
explaindecorator is applied to a list of options used in a loop, the question widget must also include theexplaintag to display tooltips.
Tags
| Tag | Description |
showexplain |
Set to 'n' to to disable explain for all options in a question or table. |
showexplaincol |
Set to 'n' to to disable explain for all columns in a table. |
showexplainrow |
Set to 'n' to to disable explain for all rows in a table. |
Additional examples
Deactivating explain text on follow-up questions
When explain tooltips are applied to lists that are used for multiple questions, the tooltips may not be needed in follow-up questions.
In the example below, the lists used for Q3 and Q3A both use explain decorators to describe pizza styles and local pizzerias. Since these lists are reused for the options and rows in T3B, the tooltips are no longer needed and can be deactivated with showexplain: n and showexplainrow: n, respectively.
Using explain text in a 'text' decorator
The [explain] placeholder can be included within a text decorator to reference the explain text outside of a tooltip. In the example below, adding {text: [text]: [explain]} to the rowsfrom listcall modifies how the row text is displayed. Each row will instead be displayed as "row text: explain text" — e.g., "Apple: Round fruit."
Since the info icons/tooltips are now redundant in this scenario, we include showexplainrow: n to hide the table rows' tooltips.
Displaying explain text in a loop
To display tooltips when using a list of options with explain decorators in a loop, add the explain tag to the question widget, and use the ~explain~ placeholder as the input.
This works like the [explain] placeholder mentioned in the previous example, but uses ~ instead of square brackets.
Comments
0 comments
Please sign in to leave a comment.