Tooltips

Last updated
Save as PDF

Applies to:: MindTouch (current)
Role required:: Draft Contributor

Set up tooltips in Expert to display extra information when hovering over a word or phrase.

Tooltips are not out-of-box functionality in Expert. This is a suggested method that uses out-of-box functionality to create a tooltip effect.

Part 1: Set up global variables

Create a global variable for each term or phrase you want to appear with a tooltip. Make the variable name match the term you will use on the page and the variable value match the variable definition. For example, you have the following glossary terms:

noun
verb

These global variable 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"

Part 2: Add JavaScript and CSS to the page

Navigate to the page to use tooltips and open it in Edit mode.
Select Style > JavaScript from the Editor toolbar to add a JavaScript field to the page and add the following code into the JavaScript field:
```
$(function() {
        $('.tool-tip-link').tooltip();    
     }
);
```

Select Style > CSS from the Editor toolbar add the following code to the CSS field:

.tool-tip-link { 
  background-color: rgb(238, 238, 238); 
  cursor: help;
  padding: 2px;
}

.ui-tooltip {
  background: #fff; }

The sample CSS code gives glossary terms a pale gray background and the tooltip box a white background. Modify as desired.

Part 3: Add the glossary term to a page

Edit the article where you want the tooltip definition to appear.
Click View > Source to open the code view.
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.

Click Save.

Test the tooltip

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

Example

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

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

Additional notes

This solution works with contextual help, but will not be styled the same way. You can leverage the append and prepend text to contextual help to add custom CSS to style the experience.