How to use Bootstrap tooltips at a Limesurvey survey

Introduction

Tooltips are a useful feature if you want to add lengthy explanations to certain keywords or answer options at Limesurvey. Since Limesurvey v3.0 the Bootstrap framework is available for all Limesurvey templates which enables you to easily add tooltips to your survey elements. We will show you how this works.

Adding tooltips to Limesurvey survey elements

Bootstrap tooltips need to be added by using proper HTML elements. You can see these elements by switching to the source code view of the Limesurvey editor. We have highlighted default HTML elements:

Limesurvey editor source code mode
Limesurvey editor source code mode

If we now want to use a tooltip for a certain keyword we need to add an additional HTML element. Placing the keyword within a SPAN element is the recommended approach since it shouldn’t change the formatting of the text.
For highlighting the word Limesurvey and adding explanatory text using a tooltip we can use the following HTML:

<span data-toggle="tooltip" title="Limesurvey is the worldwide leading open source survey software">Limesurvey</span>

This is how it looks like at the source code mode of the Limesurvey editor:

Limesurvey tooltip code
Limesurvey tooltip code

And this is how the tooltip shows up when running the Limesurvey survey:

Limesurvey tooltip example
Limesurvey tooltip example

Tooltip core elements

As you can see from the above screenshot it only takes three core elements:

  1. HTML <span>…</span> element for adding the tooltip
  2. data-toggle=”tooltip” for indicating that the element uses a tooltip
  3. title=”Your tooltip text” for defining the to be shown tooltip text

There are some more details your can add to adjust and improve your tooltips:

  • data-html=”true” allows using HTML within the tooltip itself e.g. to highlight certain words within the tooltip with bold text, example:
    title=”Limesurvey is the worldwide <strong>leading</strong> open source survey software”
  • data-placement=”auto | top | bottom | left | right” where auto is the default value. This setting allows defining how the tooltip will be positioned.

Adjusting the tooltip styles

If you have a look at the screenshot above you will notice that the word Limesurvey is not marked in any way to indicate that it uses a tooltip. So users won’t know that additional information is available. To change this, we can add an additional CSS class mytooltip to the above element and then add styles to the custom.css file of the Limesurvey template used to highlight words with tooltips.
This is the extended HTML code for our tooltip:

<span class="mytooltip" data-toggle="tooltip" title="Limesurvey is the worldwide leading open source survey software">Limesurvey</span>

At the custom.css file we are adding the below lines of code to
a) change the cursor on hover
b) underline the word
c) show the keyword as bold text
d) highlight the tooltip keyword with a different color

.mytooltip
{
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    color: orange;
}

This is what we get:

Highlighted Limesurvey tooltip
Highlighted Limesurvey tooltip

Tooltips for Limesurvey answer options

Sometimes you need to explain what a certain answer option means while you try keeping the answer text as short as possible so the answers are still easily readable. Using tooltips you can have short answer options with additional explanations being shown as tooltips. We have created an example for this as well. This is how the answer options are added at a Limesurvey single choice question:

Limesurvey answer options with tooltips
Limesurvey answer options with tooltips

And this is how it looks like at the survey:

Example of answer options with tooltips
Example of answer options with tooltips

You may notice that the tooltip element at the above example is rather small. This is because by default the size is related to the width of the underlying text. In order to increase the tooltip width for list radio or multiple choice questions we can add the following CSS code to our custom.css file:

.tooltipquestion li.radio-item label, 
.tooltipquestion li.checkbox-item label 
{
    width: 100%;
}
.answer-item .tooltip .tooltip-inner 
{
    max-width: 75%;
    margin: auto;
}

As you can see there is now an additional class tooltipquestion. This is needed because we need to overwrite the default styles for the labels of checkbox and radio items. To not apply this to all questions we add the class manually to all questions using tooltips. This can be set at the Display section when editing any Limesurvey question:

Limesurvey display settings
Limesurvey display settings

Lengthy tooltip are now shown like this:

Lengthy Limesurvey tooltips
Lengthy Limesurvey tooltips

Additional information and downloads

Here are some helpful links for you:

How to remove the “Exit and clear survey” button from a Limesurvey template

While you can easily remove the “Resume later” button from your Limesurvey template by de-activating the “Participant may save and resume later?” feature at “General Settings” -> “Notification & data management” of your survey, removing the “Exit and clear survey” button isn’t possible this way. So what to do?

There are two solutions, both require editing the current template so make sure you have sufficient rights for this. And of course, creating a backup first never hurts ūüôā

Using CSS to remove the button

At the Limesurvey template editor select the “template.css” file and at the end add this CSS code to hide the button:

#limesurvey .clearall
{
   display: none;
}

For testing we used the <commercial_mode_on>beautiful Limesurvey template “Janus” which you can download here</commercial_mode_off>. This is how the buttons look like before the above adjustment:

with button

…and with the hidden button the result is:

without button

Removing the button placeholder from template code

The solution we recommend to use is to just remove the button placeholder from the template code. While hiding the button using CSS can cause side-effects and users can still use it when setting the browser to display hidden elements, simply removing the code from the template also does the trick.

To do so go to the Limesurvey template editor and at the “Standard files” section select the “navigator.pstpl” file. That’s where we have placed the related code for all templates from our shop.
You should see the following code at which you can simply remove the {CLEARALL} placeholder:

<div id="navigator" class="clearfix">
   <div id="left">
      {SAVE}
   </div>
   <div id="right">
      {CLEARALL}
   </div>
   <div id="middle">
      {NAVIGATOR}
   </div>
</div>

Alternatively, you can comment out the placeholder so that the related code line reads:

<!-- {CLEARALL} -->

If the above doesn’t work for you and you need further help with adjusting your Limesurvey template just drop us a note.

Creating a fully responsive Limesurvey Template

We could probably write 10-12 pages about how to create a fully responsive Limesurvey template but we want to spare you from reading about all the technical details. Instead, we just want to sum up our findings and present you the results.

Several people have spent dozens of hours to create the first fully responsive Limesurvey template. You can test the template at this test survey and buy the “TFR Responsive” Limesurvey template at the Limesurvey Template Shop.

Benefits of using a responsive Limesurvey template

Of course, the biggest benefit of a fully responsive Limesurvey template is easily serving lots of different devices and presenting the survey questions well displayed on each of them. This does not only make your survey look more professional it will also lead to an increased response rate.
Furthermore, a known disadvantage of common Limesurvey templates is the lack of support for touch screen devices such as smartphones and tablets. Using such a device it can be really tricky to click a radio button or tick the small check boxes. Participants being frustrated because of such a badly designed user interface may just close the survey and leave. When using our fully responsive Limesurvey template participants can just click the text of an answer option at single or multiple choice question to mark an item. At array questions we made the whole cell clickable so even on small devices it is really easy to answer the survey questions. In addition to that the display of larger array questions is optimized by using responsive tables which means that a large table gets split up into several smaller ones which display nicely on small screens.

Technical details

The template we created is based on the bootstrap framework which is famous for serving different devices nicely. For supporting high quality images we make use of Retina JS which supports dynamic switching to a high quality version of an image or logo file if a retina display is used by the participant.
A known issue when using small devices is displaying large array questions nicely. We implemented the “No more tables” JavaScript library at our responsive Limesurvey Template which dynamically splits up large Limesurvey array questions into smaller sections which display fine even on very small devices.
Furthermore, we added custom icons and “Open Sans” as a modern font to achieve a pleasant look and feel so that our template doesn’t look as boring as the shipped Limesurvey templates.

Additional information/links

Sounds interesting? -> Check this test survey.

Want to use this fully responsive Limesurvey template? -> Get the¬†“TFR Responsive” Limesurvey template at the Limesurvey Template Shop.

Want to see more high quality screenshots? -> There you go:

How to use JavaScript at a Limesurvey template or survey

Limesurvey offers a lot of on board features but for certain issues you can add JavaScript to your survey to extend its abilities. Particularly when it comes to on-screen data validation, data filtering, setting default values or any kind of randomization, using JavaScript is the way to go and we have collected several workarounds in the Limesurvey wiki to deal with different problems.
Since some users have problems embedding JavaScript in their surveys, we want to give some examples on the different approaches.

To avoid re-inventing the wheel, Limesurvey makes use of the JavaScript library jQuery. This library is documented very well and we recommend having a look at some tutorials and the official documentation.

If you want to embed any of the jQuery based workarounds, then there should be a

$(document).ready(function())

function in the template.js file of your template where you can add all of this code so that it is only executed after the page is fully loaded. So option 1 to add JavaScript to your survey is to simply place it in the template.js file of your template.

Pros:

  • You don’t need to disable the internal Limesurvey XSS filter if you add the code directly at the template.js file.
  • You can add your code ot the existing $(document).ready(function()).
  • It is very easy to update/modify.

 

Cons:

  • The file is loaded at every page call, so it might cause some overhead if you only need the script for a certain survey question(s).
  • The code will be loaded for all surveys that use the template, so don’t add survey-specific JavaScript to any template which may be used for other surveys, instead create a copy of the template.

 

The second option is to add the JavaScript/jQuery code directly to the affected question or group. This can easily be done by embedding it in the question/group text for which you have to switch to source code view of the integrated editor:
Source code mode of integrated Limesurvey editorFurthermore, you have to disable the Limesurvey XSS filter at
Global settings -> Security -> “Filter HTML for XSS” = “No”.

Once you have done this, you can use the following code snippets. Copy them to the affected question/group text in source code mode and test if the alert message appears:

1. Embedding Javascript

<script type="text/javascript" charset="utf-8">
    alert("Test!");
</script>

2. Adding jQuery code

<script type="text/javascript" charset="utf-8">

	$(document).ready(function() {

		alert("Test!");
	});
</script>

Pros:

  • The code will only be loaded once (for the affected group/question).
  • You can easily have several similar code snippets and just change some IDs in the code without having any overhead.
  • Limesurvey placeholders and Expression Manager tags are parsed.

Cons:

  • You have to disable the internal XSS filter for which requires admin access to the Limesurvey installation.
  • The code will be split over several questions and gets harder to maintain if you add many different script snippets.

 

How to add your own favicon at a Limesurvey template

A favicon is the little icon you see in the browser’s address bar, list of bookmarks or tab. You can display your own icon as follows:

  1. Create a favicon – google will find you lots of free favicon generators
  2. Name your new favicon “favicon.ico” and place it in your template directory. This can easily be done by using the template editor’s upload feature.
  3. Add the following code to your startpage.pstpl before the closing </head> tag:
<link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">