Editable tooltips

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.

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  parameter and   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  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:

&lt;onlyinclude>

&lt;/onlyinclude>

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  and   parameter, this template can be kept pretty simple and will be similar to this:

&lt;onlyinclude>&lt;/onlyinclude>

TippingOver replaces the  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  to the   parameter. In general, a tooltip page will be set up as follows:

You would, of course, replace  and   with the actual parameters used by your tooltip. Here, the  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  and   parameter setup. Let's say you have a tooltip at Leather Boots/Tooltip. You could then use 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  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.

Infobulles modifiables Редактирование всплывающих подсказок Düzenlenebilir ipuçları 可编辑的提示