Help:Tooltips Guide

From Sun Haven Wiki
Jump to navigation Jump to search

Tooltips have a custom implementation defined in MediaWiki:SHTooltips.js. This file is heavily inspired by [dev:Tooltips] and [dev:LinkPreview], taking most of its work from LinkPreview. It adds a listener to every <a> tag (page link) and looks up the page content to display in a condensed, digestible format in a tooltip.

Note: Tooltips are cached for 10 minutes.

Associated Templates

This is a list of tooltip templates currently in use. To make a new tooltip or begin working with them, these are somewhat complete examples.

Structure

To avoid awaiting review of MediaWiki:Common.js, the following structure is used for these tooltips. 

{{Tooltip/CATEGORY}}

Defines styling and formatting. 

{{Tooltip/CATEGORY/data}}

Calls {{Tooltip/CATEGORY}} with parameters defined. It usually takes a positional parameter, the name of the page.

The template {{Tooltip/CATEGORY/data}} can accept any parameters from the infobox. Keep in mind that any changes to these parameters require changing MediaWiki:Common.js, which takes time to be reviewed and approved.

Within this data template, any relevant parameters can be retrieved. For example, {{Tooltip/Food/data}} contains the following: 

{{Tooltip/Food|{{{1}}}
|effect={{#dpl:|titlematch={{{1}}}|include={FOOD}:effect|limit=1|format=,,,}}
|permaEffect={{#dpl:|titlematch={{{1}}}|include={FOOD}:permaEffect|limit=1|format=,,,}}
|workbench={{#dpl:|titlematch={{{1}}}|include={Recipe}:workbench|limit=1|format=,,,}}
|ingredients={{#dpl:|titlematch={{{1}}}|include={Recipe}:ingredients|limit=1|format=,,,}}
}}

All data relevant to {{{1}}} (the name) is retrieved here. Some of the DPL queries here could be replaced with parameters (i.e {{{effect}}}), but any data coming from non-infobox templates need to be defined.

Code in MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

/* -------- Tooltips Configuration ---------- */
window.shTooltips = $.extend(true, window.shTooltips, {RegExp: (window.shTooltips || {}).RegExp || {} });
window.shTooltips.templates = [
	{
		templatename: "LOCATION",
		template: "{{Tooltip/location/data|%PAGE%|description=%TEXT%" +
                    "|location=<#location#>|hours=<#hours#>|map=<#map#>}}"
	},
    {
		templatename: "FOOD",
		template: "{{Tooltip/Food/data|<#name#>}}"
	},
	{
		templatename: "NPC",
		template: "{{Tooltip/NPC/data|<#name#>}}"
	},
    {
		templatename: "CROP",
		template: "{{Tooltip/crop/data|<#name#>}}"
	},
    {
		templatename: "TOOL",
		template: "{{Tooltip/tool/data|<#name#>}}"
	},
    {
		templatename: "EQUIPMENT",
		template: "{{Tooltip/equipment/data|<#name#>|set=<#armorset#>" + 
                    "|source=<#source#>|effect=<#effect#>}}"
	},
    {
        linkmatch: /Template:.+/,
        template: '{{Tooltip/template|%PAGE%}}'
    }
];
var loadingImage = "https://static.wikia.nocookie.net/sun-haven/images/8/86/Crafting_Table.gif/revision/latest?cb=20210702142456";
window.shTooltips.loadingContent = '<div style="padding: 10px;"><img src="' + loadingImage + '"/>';
window.shTooltips.delay = 300;
/* ------------------------------------------ */

SHTooltips Documentation

Styling

All tooltips are contained within #tooltip-container. There isn't usually a reason to style this element. Most styling should be done to .sh-tooltip, which is applied to every tooltip. The loading tooltip can be selected with .sh-tooltip.loading .

Configuration

When setting the configuration, start with the following: 

window.shTooltips = $.extend(true, window.shTooltips, {RegExp: (window.shTooltips || {}).RegExp || {} });

This grabs the current defaults so you can change them.

Templates

This is the main setting that will be used and changed within the configuration. When adding an item to the templates, the setup can be one of two: 

{
    templatename: "FOOD", // Infobox template name
    template: "{{Tooltip/food/data|<#name#>}}" // Contents of tooltip
}

Note: Infobox template name is expected to be in all caps, at least 3 letters. If that is not true, no template will be found.

SHTooltips will look up the article on hover, determine the name of the infobox template, and display the corresponding template.

Alternatively: 

{
    linkmatch: /Help:.+Guide/, // Regex to match the URL on
    template: "{{Tooltip/help/data|%PAGE%}}" // Contents of tooltip
}

linkmatch is a [RegExp] that will be searched for within the page path (usually the page name). The RegExp can be something as simple as /Wesley/ which will match the page "Wesley". Whenever a path is matched, the tooltip will display the template defined in template.

Magic Words

  • %PAGE%
  • %TEXT%
  • {{PAGENAME}}

Based off the magic words from DPL, %PAGE% is the name of the page. %TEXT% is the first paragraph on the page (outside of a template). If the page does not have any text before the first heading, this value will be empty.

{{PAGENAME}} is a magic word used throughout this wiki, and will be replaced with the respective page name. Other common magic words can be added upon request.

Variables

The format <#myvalue#> can match any name within an infobox template. The text will be replaced with the value in the infobox. For example, <#romanceable#> would be replaced with "Yes" when looking at Wesley, but would be replaced with "No" when looking at Gorwin. The value is currently anything placed on the same line. Any multi-line infobox template values will not be parsed correctly.

More Configuration

Name What it does Usage
templates Defines template to display for a given infobox. See above. window.shTooltips.templates = [ { templatename: "LOCATION", template: "{{Tooltip/location/data|%PAGE%|description=%TEXT%}}" } ];
delay Milliseconds until displaying tooltip window.shTooltips.delay = 300;
throttle Milliseconds to suppress hover events for window.shTooltips.throttle = 300;
loadingContent HTML to display when loading a tooltip window.shTooltips.loadingContent = '<div style="background: red; color: white;">THE PAGE IS LOADING</div>';
debug When true, you can use web inspector > console and view output for helpful debugging. Also enabled by appending ?debug=true to any URL. Settings.debug = true;
fixContentHook Probably shouldn't change this. Ensure #mw-content-text (article content) was processed. Settings.fixContentHook = true;
RegExp.ipages Does not show tooltips on these pages. Accepts text or [RegExp]. window.shTooltips.RegExp.ipages = [/Templates:.+/g, 'Wesley'];
RegExp.ilinks When hovering over these links, do not show a tooltip. Accepts text or [RegExp]. window.shTooltips.RegExp.ipages = [/Museum.+/g, 'Help:Tooltips Guide'];
Retrieved from "https://sunhaven.wiki.gg/index.php?title=Help:Tooltips_Guide&oldid=24070"