Skip to main content

Search

explain tag

  • Updated

The explain tag can be applied to questions, tables, and other widgets to add an "info" icon that displays a tooltip to respondents when hovered over or tapped.

Details

  • The explain tag can be added to questions, tables, or set text widgets. In a set text widget, the text is underlined instead of showing an info icon.
  • The dialog: y tag can be added to a set text widget to display the explain as a pop-up instead of a tooltip. Click the linked text to display the pop-up.
  • When viewed on mobile devices, explain elements function as pop-ups for accessibility purposes, even without dialog: y.
  • CSS and JavaScript can be used to customize how an explain is displayed. The page css tag is commonly used to modify the size of the tooltip or pop-up.
  • To create a tooltip for an option or row text, add an explain decorator after the text (e.g., 1. Meatlovers {explain: Pizza with sausage, pepperoni, hamburger, and bacon}).
  • When an explain decorator is applied to a list of options used in a loop, the question widget must also include the explain tag to display tooltips.

Tags

Tag Description
dialog Include with a set text widget and set to 'y' to display the explain text (or image) in a pop-up.
explain headings Adds an explain icon to table headings defined by the headings tag. The input for this tag will be the tooltip text.
height Use with dialog: y to specify the height of the pop-up. Accepts a percentage, or number of pixels or ems as input.
width Use with dialog: y to specify the width of the pop-up. Accepts a percentage, or number of pixels or ems as input.
page css Include on a question to modify how a tooltip is displayed. This is most commonly used for modifying the tooltip size — e.g., page css: .i-explain-tooltip {max-width: 500px}.

Additional examples

Using 'dialog: y'

When the dialog: y tag is added to a set text with an explain tag, the explain text is shown as a pop-up instead of a tooltip. To activate the pop-up, click the colored text.

Note, the height and width tags are included to control the pop-up's size.

Displaying images with explains

Images can be added to the explain tag to display them without using extra screen space. After adding image files to your survey, click the Copy as <Img> button to obtain the image link. The full image URL is used as the explain tag input.

In Q4, the explain tag is added directly to the question to display an image. Q4A uses set text instead, with dialog: y and height and width tags to format the pop-up size.

Modifying width of an explain with 'page css'

The page css tag can be included to adjust tooltip display. In the example below, we apply max-width: 600px increases the tooltip size from the default 300px.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.