This template creates the effect of displaying a simple tooltip when hovering over a text or icon/image -- it is achieved by applying the tooltip and tooltiptext classes to a <span>XYZ</span>.
This template is suitable for simple inline text, including inline images, but not for tables, lists, or other more complex formatting. See {{Tooltip}} for such uses.
Parameters
| Parameter | Description | Default | Status |
|---|---|---|---|
| 1 | Dotted underlined text | – | required |
| 2 | The tooltip appearing after a hovering action | – | required |
| index | tooltip "index": 2 or 3 For tooltip-in-a-tooltip functionality |
none | optional |
| style | CSS styling of tooltip, preset parameters can be overwritten by defining them again; to unset them, define them with unset or revert
|
font-style:normal; font-weight:normal; background: #FFFFFF; color:initial; padding:2px 5px; border-radius:5px; |
optional |
| outer-class | Adds additional defined classes to the display text | none | optional |
| inner-class | Adds additional defined classes to the tooltip text Note this may require overwriting |
none | optional |
Examples
By default, the hover text uses as no more horizontal space than the display text, set style=width:max-content; or a similar format to change this.
Hover {{TextTooltip|here|Example text}} to see the tooltipgives Hover hereExample text to see the tooltip
Hover {{TextTooltip|here|Example text|style=width:max-content;}} to see the tooltipgives Hover hereExample text to see the tooltip
{{TextTooltip|Hover here to see the tooltip|Example text|outer-class=eu4box}}gives Hover here to see the tooltipExample text
Hover {{TextTooltip|here|Example text|inner-class=eu4box-inline}} to see the tooltipgives Hover hereExample text to see the tooltip