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 | tooltip "class": 2 or 3 For tooltip-in-a-tooltip functionality |
none | optional |
| tag | HTML tag type: span or div Use span for simple, inline tooltips |
div | optional |
| style | CSS styling of tooltip | background:white | optional |
Example
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 to see the tooltip.Notes
- For a simpler, plaintext-only 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>. - Simple tooltips (no tables or lists) can also be used inline by setting the tag parameter to "span".