Help Center

Tooltips, popovers and modal windows

No comments

Tooltips, popovers and modal windows are great for clarifying certain words or showing 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.

Which one to use?

  • 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.

How to add?

1. Use the drop-down menu

Insert a tooltip, popover or modal window using the Variables drop-down menu in the editor:

  1. Place the cursor where you want the element to appear.
  2. Click the Variables button.
  3. Select Tooltip, Popover or Modal window from the drop-down menu.

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

2. Type the CSL yourself

  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." "top"}}
{{tooltip "" "I am a tooltip triggered by an icon" "top" "fas fa-info-circle"}}
{{popover "more info" "I am a popover" "right"}}
{{modal "more info" "I am a modal window"}}

Use an icon as 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 that the ‘active text’ is now empty. This way only the icon will be shown.

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

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

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

Use dynamic content

Survey modal window

Here is a very handy tip: 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. Type the text there that you wish to show in the modal window.
    3. Go to the Settings tab and add a data label.
      In the example below we used ‘text1′.
    4. Click on Save.
    5. Now you can show this text in a modal window on any other survey page, or even in a ReportBuilder element by referencing the Text/media question’s data label using a variable. Like this:
      Click {{modal "here" survey.questions.text1}} for more information.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.