Template:Tooltip
This template should not be used in citation templates such as Citation Style 1 and Citation Style 2, because it includes markup that will pollute the COinS metadata they produce; see Wikipedia:COinS. |
This template is used on 17,000+ pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them. |
This template uses TemplateStyles: |
The template {{Abbr}} is used to write an abbreviation (including an acronym or initialism) with its meaning. It is a wrapper for the HTML element <abbr>...</abbr>
, to create a tooltip indicating the meaning of the term. The {{Tooltip}} variant is the same, except it uses the <span>...</span>
element, and is for providing mouse-over notes about non-abbreviations.
Please note: Do not use {{abbr}}
or <abbr>
to mark up material other than abbreviations (including acronyms). Using it to generate tooltips elsewhere is a misuse of the underlying HTML and causes accessibility problems. For general-purpose tooltips, use {{tooltip}}
instead.
Note that readers on mobile devices typically do not have a mouse to hover with, and so generally cannot see tooltip contents. As of 2021, approximately the same number of English Wikipedia page views occur on mobile vs. desktop web browsers.[1]
Usage
[change source]The template {{abbr}}
and its {{tooltip}}
variant take two unnamed parameters, in order:
|1=
or first unnamed parameter- the term to be explained; shows as text, and may use wikimarkup, such as a link to an article about what it refers to.
|2=
or second unnamed parameter- the expansion or definition or other note about the term; shows as the popup when you hover over the term. No wikimarkup can be used in this parameter.
Use explicitly numbered parameters if a parameter's content contains the equals (=) character:
- Complex example:
[[Mass–energy equivalence|{{abbr|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|2=Energy = mass times the speed of light squared}}]]
- Produces: E = mc2
Named parameters (usually not needed) and the input they take:
|class=
- One or more CSS classes (space-separated if more than one)
|id=
- An HTML
id
(i.e., a#ID name here
link anchor); this must be unique on the entire page. |style=
- Arbitrary inline CSS to apply to the displayed text of the term (has no effect on the tooltip text). For any input that needs to be quotation-marked (e.g. because it contains a space character), use straight single-quotes only, e.g.
|style=font-family: 'Times New Roman', serif;
Examples
[change source]Markup | Renders as |
---|---|
{{abbr|MSLP|Mean Sea Level Pressure}} |
MSLP |
When hovering over the text "MSLP", something like Mean Sea Level Pressure will appear as a tooltip in most browsers. Popular screen readers, used by visually impaired readers, give the meaning in a different way.
Markup | Renders as |
---|---|
{{abbr|UK|United Kingdom|class=country-name|id=foobar}} |
UK |
Markup | Renders as |
---|---|
[[WP:COI|{{tooltip|conflict of interest|in the specific sense employed in Wikipedia policy}}]] |
|
Linking must be done a particular way
[change source]To wiki-link the abbreviation being marked up by this template, wrap the template in the link, not vice-versa, or the meaning will not appear in some browsers, including Chrome.
Compatibility | Markup | Renders as |
---|---|---|
Compatible | [[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]]
|
TKO |
Less compatible | {{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}}
|
TKO |
Do not link, or use any other wikimarkup or HTML markup, in the meaning (popup) – only plain text.
The mouse-over popup for the meaning text is created by a title=
attribute inside an <abbr>
HTML element's opening tag, so it cannot itself contain any HTML (or markup that resolves to HTML when rendered). This includes simple things like ''italics''
.
Accessibility and HTML validity concerns
[change source]This template is intended only for use with abbreviations (including acronyms and initialisms).
The Web Content Accessibility Guidelines contain guidelines for using the <abbr>
element generated by this template; see section H28: Providing definitions for abbreviations by using the abbr and acronym elements.
Furthermore, the HTML specifications (both those of the W3C and WHATWG) strictly define the <abbr>
element as reserved for markup of abbreviations. Abusing it for mouse-over tooltips breaks our semantic markup and makes our content invalid HTML (technically, "not well-formed"; it will pass an basic automated validator test because such a tool can't tell that the logical application of the data to the structure isn't correct, only that tags are nested properly, etc.).
Redirects
[change source]The following template names will redirect to {{Abbr}}:
{{Tooltip}} is a separate template sharing the same documentation.
Template data
[change source]TemplateData for Tooltip
This template defines an abbreviation or acronym, by creating a tooltip that is displayed on mouse-over.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Term | 1 | Shows as text | Line | required |
Meaning | 2 | Shows as a mouse-over tooltip | String | required |
CSS | style | applies the specified CSS directives to the content of parameter 1 | String | optional |
Class | class | Adds a one or more CSS classes | String | optional |
ID | id | Adds an HTML id (must be unique in the page) | String | optional |
Related pages
[change source]- {{Abbrlink}}, a variant of this template that includes automatic wikilinking of the term (abbreviation).
- {{Hover title}}, same as {{Tooltip}} except with parameters 1 and 2 reversed, and some parameters to control linking
- {{R-phrase}}, which generates the code number for an R-phrase (a "risk phrase", e.g. "Explosive when dry"). The R-phrase itself is included in a tooltip, and the code links to List of R-phrases.