Community Central
Community Central
GP Nova This requires the TippingOver extension, which is not installed on wikis by default. Those wishing to use these features will need to contact their wiki manager to request installation.

Tooltips are simple hovering boxes you can use to provide extra information to readers when they hover over certain elements on a page, such as text. To see an example, hover your mouse cursor over this link. (This will only work if your browser has JavaScript enabled.)

The TippingOver extension is highly customizable. This guide only covers the default configuration, where:

  • "/Tooltip" subpages to store the content of a tooltip. In other words, for a page named "Example", its tooltip content would be on "Example/Tooltip".
  • A tooltip is automatically applied to any wiki link to a page that has a "/Tooltip" subpage.

Note this means that tooltip content using TippingOver needs to be added manually by editors. TippingOver does not and cannot pull any information from outside sources. In some cases, another site may provide a tooltip system that you may be able to use with a wiki, but it will be necessary to depend on their documentation to set those up. Gamepedia staff may be able to assist you with this.

Setting up the needed templates for this script will also require some degree of web design skill and an understanding of MediaWiki templates.

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, MediaWiki:Hydra.css and/or MediaWiki:Hydradark.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.

A very basic example of this template would be:

<onlyinclude><div style="border: 1px solid #d1d1d1; background: #ffffff; color: #373737; width: 25em; max-width: 25em">
<div style="font-size: 132%; font-variant: small-caps; color:#f58120;">{{#if:{{{title|}}}|{{{title}}}|{{BASEPAGENAME}}}}</div>
[[Category:Tooltip templates]]

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 the right to protect these 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

TippingOver 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[]

TippingOver essentially treats each tab in your browser like a cache. TippingOver 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. This happens when the MediaWiki linker runs, so editing and saving a page (a null edit) may sometimes be required before TippingOver can attach a recently-created tooltip to a link.

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. But in this case, it's enough to simply refresh the page with the link in question to update the tooltip, since that effectively clears the "cache" of loaded tooltips.