Skip to main content

Create tooltips for pre-defined text (MT4)

This article shows how to set up a glossary in MindTouch so that your users get the definition of a word by hovering over it.


This solution requires you to have administrator permissions in order to make the necessary addition to the Global Variable and Header templates.

Step 1: Set up global variables

First, you must create a global variable for each glossary term. See the set up global variables article for step-by-step instructions.

Make the variable name match the glossary term and the variable value match the glossary term definition. For example, you have the following two glossary terms:

  • noun
  • verb

These glossary terms have the following definitions, respectively:

  • a name of a person, place, or thing
  • an action word

The code that you add to the global variables template is:

noun:"a name of a person, place, or thing",
verb:"an action word"

Step 2: Add JavaScript to the Header template

Next, you must add JavaScript code to your MindTouch site's header template:

  1. Select Templates from the Site Tools menu.
  2. Open the template named Header
  3. Click Edit Page to open the template in the editor.
  4. Select JavaScript (JEM) from the styles menu to add a JEM block to the editor.
  5. Add the following code into the JEM block:
$(function() {
  1. Save the Header template.

Step 3: Define the style

Next, add CSS to your MindTouch site's custom CSS editor to define how the glossary terms look:

  1. Select Control Panel from the Site Tools menu.
  2. Open the Custom Site CSS editor.
  3. Add CSS code to the All Roles CSS field to style the .tool-tip-link class. For example, to give glossary terms a pale gray background, you would add this code:
.tool-tip-link { 
  background-color: rgb(238, 238, 238); 
  cursor: help;
  padding: 2px;
  1. Click Save Changes.

Step 4: Add the glossary term to an article

Finally, you must add the glossary term to an article where you want the tooltip definition to appear:

  1. Edit the article where you want the tooltip definition to appear.
  2. Click View>Source to open the code view.
  3. Add the following code at the location in the document where you want the glossary term to appear:
<span class="tool-tip-link" title="{{noun}}">noun</span>
  • The noun within the braces should match exactly the global variable name you set up in Step 1. 
  • The noun between the > and < is what appears on the screen for the user to hover over.
  1. Click Save.

Step 4: Test

After you have completed these steps, you can test the tooltip definition by hovering your mouse over the glossary term you added.


Hover your mouse pointer over the following glossary terms to see the tooltip definition:

  • A thing that exists has a name, and that name is a noun.
  • A verb really gets your sentence moving.

Additional notes

This solution will work within F1, but will not be styled the same way. You can leverage F1 Append/Prepend to add custom CSS to style the experience. 

  • Was this article helpful?