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 settext widgets. In a settext widget, the text is underlined instead of showing an info icon.
  • The dialog: y tag can be added to a settext 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 pagecss 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}).

Tags

Tag Description
dialog Include with a settext 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.
pagecss Include on a question to modify how a tooltip is displayed. This is most commonly used for modifying the tooltip size — e.g., pagecss: .i-explain-tooltip {max-width: 500px}.

Additional examples

Using 'dialog: y'

When the dialog: y tag is added to a settext 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 settext instead, with dialog: y and height and width tags to format the pop-up size.

Modifying width of an explain with 'pagecss'

The pagecss 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.