Editing Template:Tooltip/doc

{{Documentation|Template:Tooltip}}
[[Template:Tooltip]] and [[Template:Tooltip text]] are templates is for generating clickable tooltips to show additional information. They are to be used together.

These tooltips '''require JavaScript''', so should only be used for non-essential additional information only. They will not show at all in the mobile skin or if the user has JavaScript disabled. The script powering these tooltips is located at [[MediaWiki:Gadget-tooltips.js]].

==Usage==
Tooltip usage is much like references. A small snippet is placed in the text to define the position of the tooltip, and the full tooltip text is specified elsewhere.

The tooltip position is specified by [[Template:Tooltip]]. The tooltip content is specified by [[Template:Tooltip text]]. The two are linked together by a name. Each {{t|tooltip text}} must have a unique name, but many {{t|tooltip}}s can refer to that name, to have the same tooltip appear in multiple places. The name is not displayed visibly to the reader. If a name is not specified for a template, a script error is thrown.

The content of a tooltip can be any normal wikicode. '''Remeber to escape | in tables!''' (use <code><nowiki>{{!}}</nowiki></code>, or HTML notation <code><nowiki><table><tr><th><td></nowiki></code> etc. Be aware that due to the nature of the construction of tooltips (within a div tag), whitespace (including additional newlines) will be collapsed to a single space. Use br or p tags to construct multiple paragraphs.

===Basic===
The most basic usage is to use the templates with minimal inputs. The required inputs are:
<pre>{{Tooltip|tooltip name}}
{{Tooltip text
|name = tooltip name
|content = tooltip content
}}</pre>

;Example
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|example1}}
{{Tooltip text
|name = example1
|content = Example tooltip content
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|example1}}
{{Tooltip text
|name = example1
|content = Example tooltip content
}}


===Advanced===
The tooltip templates have a few additional parameters, which come with defaults:
<pre>{{Tooltip|name|clickable text; default ?}}
{{Tooltip text
|name = tooltip name
|content = tooltip content
|arrow = whether to show an arrow to point at the click point; default yes
|arrowsize = width and height of the arrow (height = 2*width); default 10
|limitwidth = automatically limit width of the tooltip to within content; default yes
|style = additional in-line css to add to the tooltip; default none
}}</pre>

;Additional specification
:''limitwidth''
''limitwidth'' will automatically apply a maximum width to the tooltip, to keep it within content.

Without ''limitwidth'', the default maximum width is 80% of the entire browser window (the body tag). With ''limitwidth'' enabled, it is limited to the width of the (larger) gap between the click point and the edge of content (the tag with id=mw-content-text).

:''style''
The following styles are set during script runtime so can't be used by this parameter:
* left
* right
* top
* max-width (if using ''limitwidth'')

===Module===
To use tooltips within a module, require [[Module:Tooltip]]. The <code>_span</code> and <code>_div</code> functions are available to use to generate the clickable span and the tooltip content, respectively. They accept the same parameters as the templates, in a table. The returned span/div are mw.html objects.

===Examples===
;alt text
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|altclick|click here!}}

{{Tooltip text
|name = altclick
|content = Example tooltip content for alt click
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|altclick|click here!}}
{{Tooltip text
|name = altclick
|content = Example tooltip content for alt click
}}

;No arrow
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|noarrow}}
{{Tooltip text
|name = noarrow
|content = Example tooltip content with no arrow
|arrow = no
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|noarrow}}
{{Tooltip text
|name = noarrow
|content = Example tooltip content with no arrow
|arrow = no
}}

;Larger arrow
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|largearrow}}
{{Tooltip text
|name = largearrow
|content = Example tooltip content with a bigger arrow
<br /><br />
and more lines in the box
|arrowsize = 20
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|largearrow}}
{{Tooltip text
|name = largearrow
|content = Example tooltip content with a bigger arrow
<br /><br />
and more lines in the box
|arrowsize = 20
}}

;Limited width comparison
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|limitedwidth}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|unlimitedwidth}}
{{Tooltip text
|name = limitedwidth
|content = Example tooltip with limited width
<br /><br />
Vestibulum sit amet fringilla diam. Phasellus ac magna sapien. Suspendisse potenti. Duis id metus elementum, sagittis massa iaculis, imperdiet sem. Maecenas mollis, massa vitae vehicula mollis, eros mauris posuere mi, vel malesuada tortor lectus a lectus. Aliquam suscipit dignissim consequat. Vestibulum in ipsum orci. Vivamus quis dolor in purus viverra gravida eu quis ipsum.
}}
{{Tooltip text
|name = unlimitedwidth
|limitwidth = no
|content = Example tooltip with unlimited width
<br /><br />
Vestibulum sit amet fringilla diam. Phasellus ac magna sapien. Suspendisse potenti. Duis id metus elementum, sagittis massa iaculis, imperdiet sem. Maecenas mollis, massa vitae vehicula mollis, eros mauris posuere mi, vel malesuada tortor lectus a lectus. Aliquam suscipit dignissim consequat. Vestibulum in ipsum orci. Vivamus quis dolor in purus viverra gravida eu quis ipsum.
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|limitedwidth}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|unlimitedwidth}}
{{Tooltip text
|name = limitedwidth
|content = Example tooltip with limited width
<br /><br />
Vestibulum sit amet fringilla diam. Phasellus ac magna sapien. Suspendisse potenti. Duis id metus elementum, sagittis massa iaculis, imperdiet sem. Maecenas mollis, massa vitae vehicula mollis, eros mauris posuere mi, vel malesuada tortor lectus a lectus. Aliquam suscipit dignissim consequat. Vestibulum in ipsum orci. Vivamus quis dolor in purus viverra gravida eu quis ipsum.
}}
{{Tooltip text
|name = unlimitedwidth
|limitwidth = no
|content = Example tooltip with unlimited width
<br /><br />
Vestibulum sit amet fringilla diam. Phasellus ac magna sapien. Suspendisse potenti. Duis id metus elementum, sagittis massa iaculis, imperdiet sem. Maecenas mollis, massa vitae vehicula mollis, eros mauris posuere mi, vel malesuada tortor lectus a lectus. Aliquam suscipit dignissim consequat. Vestibulum in ipsum orci. Vivamus quis dolor in purus viverra gravida eu quis ipsum.
}}

;Style
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|style}}
{{Tooltip text
|name = style
|content = Example tooltip content with style (background colour)
|style = background:lightgreen;
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|style}}
{{Tooltip text
|name = style
|content = Example tooltip content with style (background colour)
|style = background:lightgreen;
}}

;Tables
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|table}}
{{tooltip text|name=table|content=Table test
{{{!}} class="wikitable align-right-2 align-right-3" style="margin: 0 auto;"
! Header 1
! Header 2
! Header 3
{{!}}-
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}}
}}</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|table}}
{{tooltip text|name=table|content=Table test
{{{!}} class="wikitable align-right-2 align-right-3" style="margin: 0 auto;"
! Header 1
! Header 2
! Header 3
{{!}}-
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}-
{{!}} Value 1
{{!}} Value 2
{{!}} Value 3
{{!}}}
}}

<includeonly>[[Category:Formatting templates]]</includeonly>