Editable tooltips

From Gamepedia Help Wiki
Jump to: navigation, search
IMPORTANT!
GP Nova.png ♦ Adding the tooltip script to a wiki requires a special right, editinterface, normally tied to the admin group. You can experiment with tooltips by adding the scripts to your personal script page, but only you will be able to see them. If you aren't an admin or in a special group with editinterface rights, you'll need to find someone with this right to add the script.

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.)

There are a number of ways tooltips may be set up. This guide covers setting up a tooltip system that does the following:

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

Note this means that tooltip content using this system needs to be added manually by editors. This does not 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.

Adding the script to your wiki for testing[edit | edit source]

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[edit | edit source]

Template:Tooltip hover box[edit | edit source]

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.

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>
{{#if:{{{body|}}}|{{{body}}}|}}
</div></onlyinclude>
[[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 to 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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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.