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".