How to create mouse-over tooltips in your articles

Tooltips can be very useful to give a bit more information to your readers when they mouse over something, which can make the text appear lighter and easier to process. You can do this in three ways!

1. Article link pop-up

This is a pop-up that appears when the reader hovers a link, and displays either the content of the article or custom content. To use it:

1. Click the gear icon in the sidebar and then the configuration button.
2. Under the "Display" tab, check "Display article tooltips". After saving changes, all article links will display a tooltip.
3. To replace the default with custom content, edit the article and find the "Mouseover snipper" field under "Design".

2. Simple BBCode tooltips

You can use this method to set up a tooltip on any word or phrase:

1. Find the text that you want to add a tooltip to.
2. Wrap it with the tooltip tag: [tooltip]Example[/tooltip].
3. Add the tooltip content inside the opening tag: [tooltip:This is the content of the tooltip]Example[/tooltip].

Note that the content of the simple tooltip doesn't accept any formatting or links.

3. Variable tooltips

Variables are great for cases where you know you'll need the tooltip every time a specific word appears. For example, this could be used to add the pronunciation of a word as a tooltip.

1. Click on Advanced Tools in the sidebar, and then on Variables.
2. If this is your first variable, you'll need to create a collection first.
3. Click on the collection and create a new variable like this:
• Key: choose a unique key. Make sure it doesn't repeat with other variable keys in your world.
• Title: this is the text that will be displayed on the article.
• Type: choose "Term, Simple" so that it generates a tooltip.
• Value: this is the content of the tooltip. It will not process BBCode, so use plain text without formatting.

To add the variable to the article, you have two options:

1. Use the extended mention system by typing "[" followed by the variable key and select from the dropdown.
2. In the variables list, copy the embed code by clicking the tooltip. Then, paste it into the article.