Creating tooltips under default configuration

From Aeon Garden Software Wiki
Jump to: navigation, search

When using TippingOver with default settings, there are only two things that need to be done in order to create a tooltip and enable it for a wiki link. The first to add the target page, the page the link will navigate to, to a category that enables the tooltips. The second is to create the actual tooltip page.

Adding the target page to an enabling category

By default, the root enabling category is Category:Has tooltips enabled. Thus, for example, if any link to the page Example should have a tooltip, simply adding [[Category:Has tooltips enabled]] to Example would be enough.

Often, though, it will be desirable to enable tooltips for all pages within a given category. For example, if a wiki has a large number of pages in Category:Food, rather than adding [[Category:Has tooltips enabled]] to each one of those pages, it could instead be added to the Category:Food page itself. Then all links to pages within Category:Food will have tooltips enabled as well.

But be warned that placing excessive numbers of subcategories or an excessively large number of pages within those categories may cause slow loading times for pages and potentially even cause them to time out. This is often seen as a blank white page.

Note that it is possible to change the configuration to disable the need to add pages to an enabling category, or it can reversed to provide a disabling category instead that does exactly the opposite.

Creating the tooltip page

By default, tooltips for a given page are set up on a /Tooltip subpage for that page, so the tooltip for Example would be Example/Tooltip. Note that the current version of TippingOver doesn't provide any styles for tooltips, not even an opaque background. There are a number of ways styles can be added.

Styling options

Adding styles to each individual tooltip

One way is simply put the content of each tooltip in a div with the needed styles, like this example:

<div style="background: #ffffff; border: 1px solid #999999;">
Tooltip content here...
</div>

The drawback to this is that the styles have to be repeated for each tooltip, which is extremely inconvenient if it is decided to change them all later.

Using a template

A similar approach is to use a template. For example, one could build a simple Template:Tooltip like this:

<div style="background: #ffffff; border: 1px solid #999999;">
{{{1|}}}
</div>

And then use it like so on actual tooltip pages:

{{Tooltip|
Tooltip content here...
}}

Using a wiki stylesheet

Users with the appropriate rights, such as sysops and bureaucrats, can also style all tooltips on the wiki using wiki stylesheets such as MediaWiki:Common.css or MediaWiki:Vector.css (if using the Vector skin). An example would be adding the following to one of those pages:

.to_tooltip {
  background: #ffffff; 
  border: 1px solid #999999;
}

Important notes on caching

Due to the wiki cache, new tooltips often will not appear on links immediately even when everything is set up correctly. Often, resaving the page where the link appears will cause the links on that page to update immediately, though with category enabling option, it may be necessary to wait for that to update on its own. That often takes several minutes and can take even longer at times.

Optional features

Displaying a "loading" tooltip

TippingOver does not load tooltip content for links when the page is loaded because that is likely to slow down page loads too much. It waits for the user to mouse over a link with a tooltip before requesting the tooltip content from the wiki, so there is usually a noticeable delay. It's possible to create a standard tooltip with a loading message that can be displayed immediately while the proper tooltip content for the link is being loaded.

By default, this is done by creating the loading tooltip on MediaWiki:To-loading-tooltip. (The appropriate page for this can be changed in the configuration). A simple example would be:

<div style="background: #ffffee; border: 1px solid #cccccc;">
'''$1'''

''loading...''
</div>

$1 is a special token that is replaced with the title of the link's target page automatically. So when mousing over a link to Example, "Example" will appear automatically where the $1 is.

Using an animated graphic in a tooltip like this is a common practice as it signals that something is happening.

Displaying a standard tooltip when the tooltip page is missing

Normally, if a tooltip page is missing for the target page of a given link, that link simply won't have a tooltip at all. It is possible to create a "missing page" tooltip, however, that will display for any links to pages in the enabling category or its subcategories. By default, this is done by creating the tooltip at MediaWiki:To-missing-page-tooltip. A simple example might be:

<div style="background: #ffeeee; border: 1px solid #ff0000;">
'''$1'''

''This link's tooltip has not yet been written...''
</div>

This can be useful when all pages in Category:Has tooltips enabled or its subcategories should have a tooltip. Using this feature is likely undesirable without if the category filtering options are disabled, though, as that would mean virtually every link on the wiki would then get either its own tooltip or the missing page one. It is very unlikely to have a situation where it is appropriate for every link on a wiki to have a tooltip.