FANDOM


Tooltips is a script that allows tooltips to be displayed while hovering over certain elements.

Installation

See also: Help:Including additional CSS and JS, Help:Advanced CSS and JS
  • For site-wide use, an administrator can add the line below to the wiki's MediaWiki:ImportJS page. Note that JavaScript must be enabled on the wiki.
dev:Tooltips.js
  • For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki). Note that personal JS must be enabled for your account.
importArticles({
    type: 'script',
    articles: [
        'u:dev:Tooltips.js',
    ]
});
importArticles — Best Practices for installing JavaScript on FANDOM
The importArticles statement is designed to combine multiple HTTP requests into a single data transfer, allowing multiple scripts to load and execute faster. If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements. Click "Expand" to learn how to efficiently batch import scripts to speed up performance and make your code look cleaner. One other approach is by using the MediaWiki:ImportJS.
If your JavaScript file has several lines of code that say importScript, importScriptPage, or importArticles, you may be able to combine them! By batch importing a collection of scripts with a single import, your JavaScript code will load faster and look cleaner. Consider the example below. On the left is an example of what your JavaScript file might currently look like. On the right is how you could improve that code.
Multiple imports — messy and slow One import — clean and efficient
importScriptPage('AjaxRC/code.js','dev');
 
importScript('MediaWiki:localScript.js');
 
importArticle({
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
});
 
importScriptPage('page1.js', 'wikiname');
 
importScriptPage('page2.js', 'wikiname');
importArticles({
    type: 'script',
    articles: [
        'u:dev:AjaxRC/code.js',
        'MediaWiki:localScript.js',
        'u:dev:FloatingToc/code.js',
        'u:wikiname:page1.js',
        'u:wikiname:page2.js'
    ]
});
Note: In this example, pay close attention to the placement of commas and other punctuation. For people who aren't familiar with programming (and even those who are!), a common mistake when writing code is to accidentally delete, forget, or misplace critical symbols like commas or quotation marks. This can cause a syntax error that breaks the code. Carefully follow the convention shown here when using importArticles.
But there's much more to importArticles than just this! For more examples and advanced usage, see the help page at Help:Including additional JavaScript and CSS.

Usage

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)

There are three distinct types of tooltips:

Basic tooltips – class: basic-tooltip

This type of tooltip will only show the contents of title of this element.
<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).
<span class="advanced-tooltip">Advanced tooltips<div class="tooltip-contents">Tooltip content<br/><code>Including HTML tags</code></div></span>
Advanced tooltips
Tooltip content
Including HTML tags

Custom tooltips – class: your own

This type allows the most control over contents of the tooltip with reduced page load times. You can use templates to generate tooltips and pass parameters to the template through data- attributes of the element you hover over. Its advantage over advanced tooltips is that the content of the tooltip is loaded when needed, and the same tooltip for multiple elements (same parameters) will be loaded once.
<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

Combining

Different types of tooltips can be combined to display them simultaneously. Order of tooltips is same as the order of classes.

<span class="basic-tooltip advanced-tooltip custom-tooltip-text custom-tooltip-parse" data-parameter="Parameter">Combined tooltips<div class="tooltip-contents">Advanced tooltip</div></span>
Combined tooltips
Advanced tooltip

Configuration

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:

  • offsetX and 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.
  • 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

Example of the config object:

var tooltips_config = {
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
    events: ['CustomEvent'],
    noCSS: 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.
  • text: This string or function will be used as content of the tooltip.
  • parse: Similar to text but the resulting text will be parsed, allowing the use of wiki syntax, at the cost of a short delay.
  • onParsed: This function will be executed when the parsed has been fetched (with the tooltip being its context - this)

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 context 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: $(this).data('parameter-name'))

Example of a object with settings for one type of tooltip

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

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

var 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: http://dev.wikia.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 recives 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 :)

Start a Discussion Discussions about Tooltips

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.