Skip to main content

Search

explain

  • Updated

The explain tag allows programmers to include additional information for question text without using valuable screen space. When added to a question, an "info" icon is displayed which will display additional text or images in the form of a tooltip when your cursor hovers over it.

Details

  • The explain tag can be added to questions, tables, or settext widgets. When added to a settext widget, the text will be underlined instead of including the info icon.
  • The dialog: y tag can be added to a settext widget to display the explain text/image as a pop up instead of a tooltip. Click the linked text to display the pop up.
  • When viewed on mobile devices, explain elements act like dialog pop ups for accessibility purposes, even if dialog: y is not present.
  • CSS and JavaScript can be used to modify how an explain is displayed. A common technique is to include the pagecss tag 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 option/row's 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. Click the linked text to display the 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 modal being displayed. 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 will instead be shown as a pop up. To activate the pop up, click the colored text.

Clicking "IntelliSurvey" activates the pop up, displaying IntelliSurvey's slogan. The height and width tags are included to reduce the pop up's size.

Displaying images with explains

Images can be included with the explain tag so that they can be displayed to respondents without taking up additional screen space. After adding image files to your survey, use the Copy as <Img> function to obtain a link for the image that is inserted in the explain tag.

Q4 below displays an image of the IntelliSurvey logo as a tooltip and includes CSS to adjust the width after the img src reference. Q4A uses a settext instead to define the explain. Since it also includes dialog: y, we use the height and width tags to format the size of the pop up.

Modifying width of an explain with 'pagecss'

The pagecss tag can be included with an explain to alter how a tooltip is displayed. In the example below, we apply the max-width CSS property to increase the size of the tooltip to override the default of 300px due to the length of the explain text.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.