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 |
| index | Allows tooltip-in-a-tooltip functionality, only set to 2 or 3 | – | optional |
| style | Specifies additional style properties for the tooltip container. | – | optional |
| background | Background colour. | #FFFFFF | optional |
| left | Move the tooltip right or left. | – | optional |
| top | Move the tooltip up or down. | – | optional |
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 | |
Notes
- For a simpler tooltip on hover effect please refer to the existing hover box template.
- 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.
- 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>.