Tooltips

Tooltips is a script that allow displaying tooltips when hovered over certain elements.

Installation
or

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   attributes (see section for more)

There are three distinct types of tooltips:

Basic tooltips – class:  
 * This type of tooltip will only show the contents of   of this element.
 * Basic tooltips
 * Basic tooltips

Advanced tooltips – class:  
 * Contents of this tooltip are taken from inside the element with   class. Contents of the element are taken as rendered - this allow to use wiki markup and HTML elements to format tooltip.
 * Advanced tooltips Tooltip content
 * Advanced tooltips Tooltip content

Custom tooltips – class: your own
 * Content of these tooltips can be controlled via   templates, that can reduce page loading times by rendering (including parsing of wikitext) the tooltip when it's needed. These allow to for example use templates to render contents.
 * Custom tooltips – text
 * Custom tooltips – text
 * Custom tooltips – parse
 * 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.
 * Combined tooltips Advanced tooltip
 * 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. Remember that these should be placed above code that imports the script

Main config –
Here you can adjust some core features using this object:
 * offestX 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 ( ) 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   will make the script wait for all images to be fully loaded before showing the tooltip.
 * event: Is a list of JavaScript event 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.

Example of the config object:

Creating custom tooltip types –
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 -  )

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:. This tag will be replaced with value of the  attribute of the element. You can use multiple parameters, and one parameter multiple times. // <#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: )

Example of a object with settings for one type of tooltip

Common properties
These properties can be used for all types, including the built in ones (  and  )
 * delay: Just like the names 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 ( ).

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

Debug mode –
Setting it to   will make some elements visible making it easier to spot problems.

Other notes and tips

 * Tooltips that contain redlinks recive a  class – you can use it to hide tooltips with missing templates.
 * Tooltips that haven't been loaded yet recive a class  - you can use it to show loading indicator or just hide the tooltip.