Template:Tooltip

Template documentation

This documentation is transcluded from Template:Tooltip/doc. (edit | history)

See also: Template:Hover box

This template creates the effect of displaying an advanced tooltip when hovering over a text or icon/image -- it is achieved by applying the tooltip and tooltiptext classes to container classes such as <span>XYZ</span> or <div>XYZ</div>.

The user can customize the tooltip's appearance by defining its layout, used images, and text styles. This can be defined in-page, called via another template, or called after being enveloped within transclusion tags.

Parameters

Parameter	Description	Default	Status
1	Dotted underlined text	–	required
2	The tooltip appearing after a hovering action	–	required
class	Specifies the class of the tooltip container.	plainlist	optional
style	Specifies the style properties of the tooltip container.	–	optional
padding	Specifies the additional space added at the edges of the tooltip container.	6	optional
width	Width of the tooltip. Applies nowrap to tooltip contents if unspecified.	nowrap	optional
index	Allows tooltip-in-a-tooltip functionality, only set to 2 or 3	–	optional

Example

See also: Template:Tooltip/Example

Example table
File:Paradox Interactive logo.png	File:Paradox Interactive logo.png
This is an example table

For a usage example, see the table on the right. It has been defined as a template and also enveloped within transclusion tags. This allows the table to be called in one of the below ways:

• <span>Hover {{Tooltip|here|{{Template:Tooltip/Example}}}} to see the tooltip</span>
• <span>Hover {{Tooltip|here|{{#lst:Template:Tooltip/Example|example table}}}} to see the tooltip</span>

Both of which will result in:

Hover

here

Example table
File:Paradox Interactive logo.png	File:Paradox Interactive logo.png
This is an example table

to see the tooltip

Notes

1. For a simpler tooltip on hover effect please refer to the existing hover box template.
2. The "wikitable" class has by default 1em margin added to the top and the bottom of the table causing tables of this class to appear a tad below its template. For best effect it is advised to set the margin style to 0px.
3. To allow for objects like tables to appear inline, the whole sentence/paragraph should be enveloped within an external <span>XYZ</span> or <div>XYZ</div>.