Template:Tooltip/doc
 | This is a documentation subpage for Template:Tooltip. It contains usage information, categories, and other content that is not part of the original template page. |
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 {{tooltip text}} must have a unique name, but many {{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 {{!}}, or HTML notation <table><tr><th><td> 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:
{{Tooltip|tooltip name}}
{{Tooltip text
|name = tooltip name
|content = tooltip content
}}
- Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|example1}}
{{Tooltip text
|name = example1
|content = Example tooltip content
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Advanced
The tooltip templates have a few additional parameters, which come with defaults:
{{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
}}
- 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 _span and _div 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|altclick|click here!}}
{{Tooltip text
|name = altclick
|content = Example tooltip content for alt click
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- No arrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit.{{Tooltip|noarrow}}
{{Tooltip text
|name = noarrow
|content = Example tooltip content with no arrow
|arrow = no
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Larger arrow
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
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Limited width comparison
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.
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Style
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;
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Tables
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
{{!}}}
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.