Tooltips, popovers, and modal windows

Tooltips, popovers, and modal windows can be used to clarify certain words or show additional information in context without having too much text or taking up too much screen space at once.

You can use tooltips, popovers, and modal windows in surveys and ReportBuilder elements. They cannot be used in emails.

  • Tooltip — Use tooltips to show a short text to respondents when they hover over a word or icon.
  • Popover — Use popovers to show a longer text or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon. The window remains visible until they click again outside of the popover.
  • Modal window — Use modal windows to display a long text, images and links. This creates an overlay that covers a large part of the screen. The background becomes darker so that the focus lies on the window. Respondents click on the X in the top-right corner or outside of the modal window to close it.

Syntax

You can create all three elements by adding some CSL to your text using the following syntax.

  • Operator — Determine what you want to use (a tooltip, a popover, or a modal window).
  • Active text — This is the text that reacts to either the hover or click. Leave the space between the double quotes empty when you only want to display an icon.
  • Contents — This is the content that will be shown in the tooltip, popover, or modal window.
  • Position (optional) — Use a position to determine where the contents must be shown (only for tooltips and popovers).
  • Icon (optional) — Show an icon as trigger instead of text.

Syntax.

To add an element, you can either use the Variables dropdown menu or enter the CSL yourself.

To use the dropdown menu, complete the following steps:

  1. Place the cursor where you want the element to appear.

  2. Click Variables.
  3. Select Tooltip, Popover, or Modal window from the dropdown menu.

    Tooltips.

    Note: All items in the dropdown menu are ordered alphabetically, so the order may differ from this animation.

To enter the CSL yourself, complete the following steps:

  1. Start the CSL code with two curly brackets {{

  2. Type the operator (tooltip, popover, or modal).

  3. Type your active text between double quotes that will trigger the element (e.g., "click here").

  4. Add a space.

  5. Type the contents between double quotes.

  6. Optionally, add a position.

  7. Optionally, add an icon class.

  8. Close the CSL code with two curly brackets }}. Examples:
    {{tooltip "more info" "I am a tooltip." position="top"}}

    {{tooltip "" "I am a tooltip triggered by an icon" position="top" icon="fas fa-info-circle"}}

    {{popover "click here" "content" position="right" icon="fas fa-star"}}

    {{#modal "click here"}}You can add more text here. Quotes, new lines and extra variables are all possible.{{/modal}}

Using an icon as a trigger

To trigger your tooltip, popover, or modal window using an icon, add an extra parameter as shown in the syntax above.

Add the Font Awesome class to show the icon you want.

The code below will show an info circle.
Note:

The 'active text' is now empty. This way, only the icon will be shown.

{{operator "" "contents" icon="fas fa-info-circle"}}

The code below will some text and an info circle icon right next to it.

{{operator "active text" "contents" icon="fas fa-question-circle"}}

Example.

If the content you want to show in your modal window is long or has lots of formatting or images, place the contents in a hidden text/media element instead of trying to type it directly into the CSL code. Then show the contents in your modal window by using a variable.

Follow these steps to add dynamic content to a modal window:

  1. Add a text/media question to your survey and hide it.
  2. Enter the text that you want to show in the modal window.
  3. Select the Settings tab and add a data label. In the example below, we used 'text1′.
  4. Click Save. Now you can show this text in a modal window on any other survey page or in a ReportBuilder element by referencing the text/media question's data label using a variable, as follows:
    Click {{modal "here" survey.questions.text1}} for more information.

This method will keep your CSL code tidy and make translating a lot easier.

Another way of using longer text inside modal windows, tooltips, and popovers is to use the block syntax. See the following examples:

{{#modal "Click here"}}
This text can be longer and contain markup, quotes and variables.
{{/modal}}

{{#tooltip "Click here"}}
This text can be longer and contain markup, quotes and variables.
{{/tooltip}}
{{#popover "Click here" position="right" icon="far fa-star"}}
This text can be longer and contain markup, quotes and variables.
{{/popover}}