Template:Tooltip

Template documentation

This template, {{Tooltip}}, uses the HTML <span>…</span> element's title="…" attribute to provide generic notes for normal text. Please be mindful that visitors on mobile devices typically do not have a mouse to hover with and so cannot access these annotations in most circumstances, even when their presence is obvious.

Usage

The simplest functional example of this template's expected use—where no other wiki-markup syntax or link is needed—takes the form:

{{Tooltip|text displayed with dotted underline on the page|the note that appears when hovering with the mouse}}

Parameters

This template has two (2) unnamed or positional parameters that must be defined, along with five (5) other named parameters that are optional:

Template:Tooltip parameter guidance

Parameter	Value
Required parameters
First unnamed/positional (or |1=)	The normal text to be annotated. Wiki markup is allowed, but works more consistently when wrapping the template (see examples below).
Second unnamed/positional (or |2=)	The tooltip/hover text, where no wiki or HTML markup allowed (or markup that resolves to HTML when rendered); this includes simple things like ''italics''.
Optional parameters
|link=	If the text being annotated should also be a link, the page name (plus optional anchor) target of the link can be defined here. The resulting output, however, does not follow the default site styling for link colors, and is thus inferior to the "link-wrapped" style shown in § Linking below.
|dotted=	If the default text decoration of a dotted underline is undesirable, assigning a "false-y" value such as no to this parameter will suppress it.
|id=	An HTML id attribute value (must be unique on the entire page).
|style=	Inline CSS declarations applied to the displayed text (they have no effect on the tooltip/pop-up), each terminated with a semicolon. Any values containing whitespace must be single-quoted, e.g. |style=font-family: 'Times New Roman',serif;.
|class=	One or more CSS classes (space-delimited, if more than one).

Examples

Markup	Renders as
{{Tooltip|LSD|Louisiana School for the Deaf}}	LSD

When hovering with the mouse over the text "LSD", a box similar in appearance to Louisiana School for the Deaf will appear to users of nearly all modern desktop web browsers. Mobile devices may display a dotted line or other visual indicator of abbreviation, but will not provide the tooltip. Nor will screen readers for the visually impaired read the expansion by default, though some provide an optional setting to read the expansion aloud.

Markup	Renders as
[[Wikidata:Conflict of interest|{{Tooltip|Conflict of interest|in the specific sense employed by Wikimedia policy}}]]	Conflict of interest

Tooltips should not be used within the body text of an page, if possible. Generic tooltip notes are not a substitute for footnotes and are intended to be used for navigational and other secondary features where space is limited.

Linking

To wikilink the abbreviation being marked up by this template, the preferred approach is to wrap the template in the normal paired square brackets wikilink syntax, as seen in the top row of the table below. Doing the reverse (as seen in the bottom row) causes the tooltip to be superseded by the name of the linked page or not appear at all in some, mostly older, browsers. The use of the |link= parameter is also an option, but suffers the drawback of losing the site's default color styles for links, thus creating a "hidden" link that readers will only realize exists by observing the change in cursor style when the mouse travels over it.

Browser compatibility	Wiki markup	Renders as
Best (~98%)	[[Q110879979|{{Tooltip|TKO|technical knockout}}]]	TKO
Good (~90%)	{{Tooltip|TKO|technical knockout|link=Q110879979}}	TKO
Poor (<70%)	{{Tooltip|[[Q110879979|TKO]]|technical knockout}}	TKO

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools.

Tooltip

This template adds a tooltip note displayed on mouse-over for a string of text

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
Annotated text	1	The page text to which the tooltip annotation will be added Example Any old text	String	required
Tooltip note	2	The text to display as a tooltip when the mouse cursor hovers over it; do not use wiki markup here. Example a brief explanatory note	String	required
Link target	link	If the annotated text should also function as a link, supply the target page name or anchor here Example Q23	Page name	optional
Anchor ID	id	Adds an HTML id attribute to the span tags that wrap the page text, creating an anchor that can serve as a link target following a '#'; must be unique on the page. Example shortcut1	Line	optional
Dotted underline	dotted	To suppress the default text decoration of a dotted underline, define the value for this parameter as 'no' Default yes Example no	Boolean	optional
Custom styling	style	Adds inline CSS declarations to alter the styling for the value of parameter 1 Example color: firebrick; font-size: 110%;	Line	optional
Extra classes	class	Adds one or more CSS classes to the span tags used to wrap the page text and create the tooltip; multiple classes must be space-delimited. Suggested values nowrap plainlinks Example nowrap plainlinks	Line	optional

See also

• {{Abbr}}
• {{Code}}
• {{Tag}}
• {{Var}}