Willow: the mass documenting

2026-06-20T11:55:08Z

the mass documenting

New page

'''<code>ImageTooltip</code> shows an image that swaps to a second image on hover and reveals a titled tooltip box of details — used for the interactive nodes on the skill-tree pages.'''
__TOC__

== Overview ==
This template renders a base image; when the reader hovers it, the image can switch to a "hover" version and a tooltip panel (with a title and a block of content) appears. It is the building block of every skill-tree node — see [[Template:Knight/Skill Tree]] and the other class skill-tree templates ([[Template:Assassin/Skill Tree]], [[Template:Huntress/Skill Tree]], etc.).

== Parameters ==
{| class="wikitable"
! Parameter !! Required? !! What it does !! Example
|-
| <code>img</code> || Optional || One or two file names (with extension) separated by a semicolon <code>;</code>. The first is the base image; the optional second is shown on hover. Both render at 46px. Omit for a tooltip with no image. || <code>SpinningQuestion.gif;HoverSpinningQuestion.gif</code>
|-
| <code>title</code> || Optional || The heading shown at the top of the tooltip panel (e.g. the skill name). || <code>Ground Zero</code>
|-
| <code>content</code> || Optional || The body of the tooltip. Free wikitext/HTML — paragraphs, <code></code> highlights, <code> </code>, etc. || <code>Upon activating a shield...</code>
|}

== How to use ==
1. Set <code>img</code> to your image file name(s) '''with''' extension. For a hover-swap effect, give two names separated by a semicolon: <code>img=Base.gif;Hover.gif</code>. The part before the <code>;</code> is the resting image; the part after is shown while hovering.
2. For a single static image with no swap, give just one name: <code>img=Base.gif</code>.
3. Put the tooltip heading in <code>title</code> (typically the node/skill name).
4. Put the tooltip body in <code>content</code>. Because it is usually multi-line, place <code>|content=</code> on its own line and write the HTML beneath, closing with <code>}}</code>. The skill trees use <code>...</code> with <code></code> tags to highlight numbers.

== Copy this ==
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{ImageTooltip
|img=
|title=
|content=
}}
</syntaxhighlight>

== Example ==
{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Ground Zero
|content=
Upon activating a shield, for 5s every time you land from a jump you will deal damage in a 4 block radius based on ability tier point.
}}

<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Ground Zero
|content=
Upon activating a shield, for 5s every time you land from a jump you will deal damage in a 4 block radius based on ability tier point.
}}
</syntaxhighlight>

== Tips & notes ==
* The semicolon in <code>img</code> is the key syntax: <code>base;hover</code>. With only one name there is simply no hover swap.
* Both images must include their extension (<code>.gif</code>, <code>.png</code>) — the template does not append one. Both are rendered at a fixed 46px, centered, with links disabled.
* Skill-tree nodes that aren't ready yet use the placeholder pair <code>SpinningQuestion.gif;HoverSpinningQuestion.gif</code>.
* Inside <code>content</code>, bare <code></code> tags are styled by the page CSS to highlight values; this is a convention, not a requirement.
* Escape apostrophes in <code>title</code> as needed in source (the trees use <code>&#x27;</code>) so they don't interfere with wiki markup.
* Related: {{tl|InlineImage}} (static captioned image) and {{tl|DynamicGifDisplay}} (the hover-driven GIF panel these nodes feed).

Template:ImageTooltip/doc - Revision history

Willow: the mass documenting