Manual: How to create tooltips

“Tooltips” is additional information. It is shown in two ways on the website:
a) as a pop up when you hover over the tooltip (in blue) in the main text, and
b) as text in the footnote

a) Tooltip as a pop up in the main text.
b) Tooltip in the footnote.

1. Creating a Tooltip/Pop Up

To create a tooltip go to the wordpress admin area (also called the back-end) and press the tooltips menu item.

WordPress admin area/backend

You will see the overview of the existing tooltips.

Tooltips overview

Here you see:

  1. The button to add a new tooltip
  2. The existing tooltips. You can click on them to view and edit them. The tooltip we are about to create will show up in this overview as well.

Click the add new button. You will see the following screen:

Create a new tooltip

With:

  1. The title of the tooltip. This is the piece of text that will be highlighted. BEWARE: if you put in here a common string of words that are written on other pages, too, the pop up will show up there, too. So choose a unique, longer phrase as a title.
  2. The content of the tooltip. This is the piece of text that will show up in the pop up and that will show up in the footnote at the bottom of the page
  3. Click this publish button when you have written both the title and the content of the tooltip.

Titles and tooltips are automatically highlighted

Once you have published the text of all the front page articles is automatically parsed for the title of the content. If it finds a piece of text that matches the title that piece of text will be highlighted (and when you hover over this highlighted text the content will show in the pop up box).

2. Adding the tooltip in the footnote

The content of the tooltip has to show up in the footnote section, too, because on some smartphones it may not work as a pop up. You will need to do this manually.

Go to “Posts” at the backend and edit the post that you want to add the footnote to:

First create a section for the foonotes:

Add a seperator. This is block. Click the +, search for seperator and add it:

Add the line/seperator block

Then add the header (h2):

Add the header H2 block, then type “Foonotes”

Then add the shortcode for the tooltips that you want to add (in a regular paragraph block, it is just text):

Example shortcode added

The shortcode should be like this:

[footnotefooter number=NUMBER title="TITLE"]

Where NUMBER is the number the count of the tooltip on this page (you can enter any number here ideally this would be calculated automatically but for now you have to enter it manually) and TITLE is the tooltip title that is also highlighted in the text.

It will show up like this:

Resulting footnote

Final Remarks

Make sure that:

  • the title you gave the tooltip matches the piece of text that you want. Unfortunately all the front page posts are searched for matching tooltip titles, so if you make the title too generic it might highlight the text in multiple front page posts
  • if you change the title of a tooltip make sure you check that it highlights the text in the front page posts correctly. Also update the title in the shortcode for the footnotes!
  • if you change the content of a tooltip, no worries, it is updated automagically everywhere