Editable tooltips

Tooltips are simple hover effects you can use to provide extra information to readers when they hover over certain elements on a page, such as text. This guide explains how to set up a script, styles, and templates for a system that displays tooltips set up on /Tooltip subpages of wiki pages, not to tooltips generated from outside sources. For tooltips from outside sources such as a database site, it will be necessary to depend on their documentation to set those up. Gamepedia staff may be able to assist you with this.

Either way, the initial setup requires the editinterface right normally associated with the administrator group as a script has to be added to the wiki. Usually, this means you'll have to be an admin or get an admin to add the script for you, unless your wiki happens to have a special group with the editinterface right that you can join. Setting up the needed templates for this script will also require some degree of web design skill and an understanding of MediaWiki templates.

Adding the script to your wiki for testing

It is highly recommended that you copy the script into your personal script page first until the core templates and any styles are set up and have been verified to work correctly. To do this, copy the Wiki Subpage Tooltip Script and paste it into the User:yourname/common.js page on the desired wiki, changing yourname to your username.

The script currently requires a minor change for non-English wikis. Leave a message on User talk:OOeyes to request the appropriate modification for the language in question.

Setting up the templates

Template:Tooltip hover box

This is the main template that determines the appearance of the tooltips. You can either design the appearance entirely self-contained here, or you can add or use styles from MediaWiki:Common.css and/or MediaWiki:Hydra.css to use here.

Either way, the template will need to get its content from at least one parameter. It is recommended that at a minimum, you design the template to use a title parameter and body parameter. Having a separate parameter for the title lets you use this template for tooltips that are still loading instead of having to copy and paste your design into the loading template. You can optionally use more specific parameters instead of the body parameter, but either way, you need a way to feed the non-title content into the tooltip.

It is recommended that you use a fully opaque background for your tooltip design, as the tooltips move with the mouse cursor, and transparent backgrounds may not perform well on all computers. If you have to ability to protect templates, it is recommended that you do so as it will almost certainly become a high-use template.

Template:Tooltip hover box loading

This is the template that determines the appearance of tooltips while they are loading. If you followed the advice above about using a title and body parameter, this template can be kept pretty simple and will be similar to this:

<onlyinclude>{{Tooltip hover box
  |title=$1
  |body=Loading...
}}</onlyinclude>

The script replaces the $1 with the title of the page it's loading the tooltip for, allowing for the title to be displayed before the tooltip is loaded. In some cases, this will not exactly match the title that should be displayed: for example, a page named "Leather Boots (Level 20)" should probably only have a title of "Leather Boots", but the script has no way to know this until the tooltip is loaded.

Adding an animated loading icon to this template is highly recommended, and as with Template:Tooltip hover box, this template is probably best protected.

Setting up a test tooltip

Create a subpage of any page that ends in "/Tooltip", without the quotes. The main page for it doesn't have to exist. For example, if you create a /Tooltip subpage of your user page, it doesn't matter if your user page actually exists.

The tooltip pages are treated like templates by the script, which passes Tooltip hover box to the 1 parameter. In general, a tooltip page will be set up as follows:

{{ {{{1|Tooltip hover box}}}
  |title=tooltip title here
  |body=tooltip body content here
}}

You would, of course, replace title and body with the actual parameters used by your tooltip. Here, the 1 parameter identifies what template the tooltip page should call. This lets you reuse the tooltip data in other ways.

For example, you could set up an infobox template at Template:Item infobox that uses the same parameters as Template:Tooltip hover box, though this requires more than the simple title and body parameter setup. Let's say you have a tooltip at Leather Boots/Tooltip. You could then use {{:Leather Boots/Tooltip|Item infobox}} on the Leather Boots page to create an infobox from the tooltip data. More basically, you might just create another version of Template:Tooltip hover box that can be used on pages; the styles often need to be different due to font sizing issues. You can make another template default by changing the {{ {{{1|Tooltip hover box}}} line above to reference a different template as well.

Testing the tooltip

To test the tooltip, create a link somewhere to the tooltip's base page. For example, if a tooltip is at Leather Boots/Tooltip. create a link to Leather Boots. Then hover your mouse cursor over the link and see if the tooltip looks right during and after the loading is done.

Setting up tooltips for all users

Once testing is complete and the templates all work as desired, move the script from your personal script page to MediaWiki:Common.js. Now tooltips will work for all users.

Notes on caching

The tooltip script essentially treats each tab in your browser like a cache. When a page is initially loaded from the wiki, the script looks through the links on that page and figures out which ones have existing tooltip pages and invisibly attaches a "loading" tooltip box to each of those links. It does not check again until the page is reloaded in the browser, so any links to pages that get tooltips added after the last time the page was refreshed won't load tooltips. Simply refresh the page in your browser to solve this problem.

Similarly, the tooltip script will load each tooltip only once between page loads. It starts to load a tooltip when you hover over a link that it attached a tooltip box to. If any changes are made to the tooltip after it's been loaded, the script will not try to reload the tooltip and the changes won't show up. Again, simply refresh the page with the link in question to solve this problem. Now when you hover over the link, the tooltip will be reloaded and any changes should show up.