Fandom Developers Wiki
Advertisement

此頁面或部分內容仍未翻譯,請將其翻譯成適當的語言(中文(繁體))

Tooltips(工具提示)是一種腳本, 它允許指標懸停在某些元素上時顯示Tooltips.

注意: 請記住移動閱讀器, 不要將工具提示用作顯示內容的唯一方式。靈活運用以一個術語的快速摘要的形式, 並在頁面上囊括所有資訊細節。

安裝方法[]

使用方法[]

To make the script show a tooltip when hovered over a specific element you have to add a special class to it. Some types of tooltips also support additional parameters specified via data- attributes (see section Configuration for more).

這裡有三種方式表述 tooltips:

基本工具提示(basic-tooltip) – class
basic-tooltip
此類型的工具提示將僅顯示此元素的title內容
<span class="basic-tooltip" title="Text to show inside tooltip">Basic tooltips</span>
Basic tooltips
進階工具提示(Advanced tooltips) – class
advanced-tooltip
Contents of this tooltip are taken from inside the element with tooltip-contents class. Contents of the element are taken as rendered. This allow to use wiki markup and HTML elements to format tooltip. Remember that contents of these tooltips are loaded on page load. This can drastically slow down page load times with big amounts of tooltips (including repeated uses of the same one).
<div class="advanced-tooltip" style="display:inline-block">Advanced tooltips<div class="tooltip-contents">Tooltip content<br><code>Including HTML tags</code></div></div>
Advanced tooltips
Tooltip content
Including HTML tags
Advanced tooltips will cause a new line when they're used inline if any of the tooltip content contains a block-level tag (regardless of styles), due to the MediaWiki parser automatically adding <p> tags to the subsequent text. This can be solved by wrapping the entire text in a <span> or <div> to suppress the automatic <p> tag, e.g.
<span>This is an example of <span class="advanced-tooltip">Advanced tooltips<div class="tooltip-contents">Tooltip content</div></span> being used inline.</span>
This is an example of Advanced tooltips
Tooltip content
being used inline.
自訂工具提示(Custom tooltips) – class
此類型允許以最大程度控制tooltips的內容, 同時減少頁面載入時間。您可以使用data-生成tooltips, 並通過懸停在其上元素的資料屬性參數傳遞給範本。與Advanced tooltips相比, 它的優點是在需要時載入tooltips的內容, 並且將載入一次多個元素 (相同參數) 的相同tooltips
<span class="custom-tooltip-text" data-parameter="Some value">Custom tooltips – text</span>
Custom tooltips – text
<span class="custom-tooltip-parse" data-parameter="Some value">Custom tooltips – parse</span>
Custom tooltips – parse

結合[]

可以組合不同類型的工具提示以同時顯示它們。工具提示的順序與類的順序相同。

<div class="advanced-tooltip basic-tooltip custom-tooltip-parse custom-tooltip-text" data-parameter="Parameter" style="display: inline-block;">Combined tooltips<div class="tooltip-contents">Advanced tooltip</div></div>
Combined tooltips
Advanced tooltip

組態[]

Without any setup, script will only support basic and advanced tooltips. There are 3 variables that contain config for the script. You can specify them in MediaWiki:Common.js on your wiki.

Main config – tooltips_config[]

Here you can adjust some core features using this object:

events
Is a list of JavaScript events of the window object that will trigger the search for tooltips that weren't present when script was initialized. This way you can make tooltips work in custom interface element that are added after the page is loaded and tooltips initialized. For example in a custom right rail module.
noCSS
If you want to disable import of default CSS, set it to true.
offsetX / offsetY
These are values that the tooltip will be moved right and down (respectively) from where the cursor is pointing (remember that margin of tooltip itself can move it further). Default value is 8 for both and values below 5 are not recommended.
waitForImages
It will alter how tooltips behave when they have images inside. By default (false) tooltips will show up even if images aren't fully loaded yet. Images will eventually show up when they are loaded (lazy loading). Setting this value to true will make the script wait for all images to be fully loaded before showing the tooltip.

Example of the config object:

window.tooltips_config = {
    events: ['CustomEvent'],
    noCSS: true,
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
}

Creating custom tooltip types – tooltips_list[]

You can add your own tooltips to this array. Every type of tooltip is an object with these properties:

classname
CSS class that will trigger the tooltip of this type. This property is required.
onParsed
This function will be executed when the parsed has been fetched (with the tooltip being its context - this).
parse
Similar to text but the resulting text will be parsed, allowing the use of wiki syntax, at the cost of a short delay.
text
This string or function will be used as content of the tooltip.

Both text and parse can be either a string or a function.

If the value is a string, you can use parameters that will be taken from the element the cursor is pointing at. To use a parameter, you need to add this in the text: <#parameter-name#>. This tag will be replaced with value of the data-parameter-name attribute of the element. You can use multiple parameters, and one parameter multiple times.

{{Template|<#value#>}}  <!-- <#value#> will be replaced with content of data-value attribute -->

Other way is to specify a function that will be executed whenever a new element without the tooltip is hovered-over. This function has that element as its first argument and should return contents of the tooltip (or wikitext to parse). Returned string doesn't support parameters like above since you can access any attributes yourself (ex: $(elem).data('parameter-name'))

Example of an object with settings for one type of tooltip:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: '{'+'{Tooltip|<#name#>|<#value#>}}',   // '+' makes MediaWiki ignore the template on the page with settings
}

Example of an object with a parse function:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: function parse(elem) { return '{'+'{Tooltip|' + $(elem).data('name') + '|' + $(elem).data('value') + '}}' },
}

Common properties[]

{These properties can be used for all types, including the built in ones (basic-tooltip and advanced-tooltip):

delay
Just like the name says. It'll make the tooltip appear after the specified delay in milliseconds. Tip: 1 second = 1000 milliseconds.
onShow / onHide
Are pseudo-events that will be triggered (respectively) right after the tooltip is shown and right before it'll be hidden. These are callback functions with the tooltip itself being their context (this) and the hover handle that triggered the tooltip as an argument.

Example of settings for two custom tooltips and modifying behavior of basic tooltips:

window.tooltips_list = [
    {
        classname: 'custom-tooltip-text',
        text: "Parameter: <#parameter#><br>This is just text and HTML - wikitext '''won't''' be parsed",
    }, {
        classname: 'custom-tooltip-parse',
        parse: '{|style="white-space:nowrap;"\n!Parameter:\n|<#parameter#>\n|-\n!Lc:\n|{'+'{lc:<#parameter#>}}\n|-\n!Uc:\n|{'+'{uc:<#parameter#>}}\n|-\n!PAGENAME:\n|{'+'{PAGENAME}}\n|}',
    }, {
        classname: 'basic-tooltip',
        delay: 500,
        onHide: function(handle) { $(this).html($(handle).html()) },
    },
]

Debug mode – tooltips_debug[]

Setting it to true will make some elements visible making it easier to spot problems. Debug mode can also be turned on temporarily by adding ?ttdebug=true at the end of the URL. Like so: https://dev.fandom.com/wiki/Tooltips?ttdebug=true

Other notes and tips[]

  • Additional classes to tooltips:
    • has-redlinks - given to tooltips that (as the name says) have redlinks inside – this can be used to hide tooltips with missing templates.
    • tooltip-loading - given to tooltips that are still waiting for parsed contents to load – you can use it to show loading indicator or just hide the tooltip until it's ready.
    • tt-tooltip-type - every tooltip receives class based on its type (ex: tt-basic-tooltip) – great for having different looking tooltip types.
  • If your tooltips has shadow you might want to make space for it by adding margin to them or by adding padding to the <div> that contains active tooltips (#tooltip-wrapper).

Showcase[]

Feel free to add your wiki to the list if it uses this script to show how it works in action.

參閱[]

Advertisement