Willow: the mass documenting

2026-06-20T11:55:14Z

the mass documenting

New page

'''<code>Template:SkillHover</code> renders a skill-tree node box that reveals a description tooltip to the right when the reader hovers over it.'''
__TOC__

== Overview ==
This template draws the same 220×80px dark node box as [[Template:Skill]] (label centered in white), but wraps it so that hovering the box pops up a description tooltip beside it. It takes two parameters: <code>name</code> (the box label) and <code>description</code> (the tooltip text). If <code>name</code> is empty the whole template renders nothing. The hover behaviour is driven by an inline <code><nowiki><script></nowiki></code> block in the template. On the live wiki the Skill Tree page is built from <code>{{ImageTooltip}}</code> nodes inside the per-class data templates instead, so <code>SkillHover</code> documents an alternative text-box node and is not the node type currently used on the live [[Skill Tree]] page.

== Parameters ==
{| class="wikitable"
! Parameter !! Required? !! What it does !! Example
|-
| <code>name</code> || Required || The text shown centered inside the node box. If blank or omitted, the template renders nothing. || <code>name=Unyielding Bastion</code>
|-
| <code>description</code> || Optional || The text shown in the tooltip that appears when the reader hovers the box. If omitted, the tooltip shows the fallback text "Hover for description". || <code>description=Gain +2 defense for 3s when your shield deals damage.</code>
|}

== How to use ==
1. Type <code><nowiki>{{SkillHover</nowiki></code> to start the template.
2. Add the node label with <code>|name=</code>.
3. Add the hover text with <code>|description=</code>. You can leave this out — it will then say "Hover for description".
4. Close with <code><nowiki>}}</nowiki></code>.

Special-syntax notes: the tooltip is positioned to the right of the box (it appears at <code>left:230px</code>), so leave room on the right side of the node. The hover show/hide is handled by the template's built-in script that targets every <code>.skill-node</code> element on the page, so you do not need to add any JavaScript yourself — just place the template. The <code>description</code> may contain wikitext/HTML if you want line breaks or coloured spans.

== Copy this ==
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{SkillHover
|name=
|description=
}}
</syntaxhighlight>

== Example ==
Live result (hover the box to see the tooltip):

{{SkillHover|name=Unyielding Bastion|description=When your shield deals damage or when you take damage, gain +2 defense for 3s (Max 20)}}

Wikitext that produced it:

<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{SkillHover
|name=Unyielding Bastion
|description=When your shield deals damage or when you take damage, gain +2 defense for 3s (Max 20)
}}
</syntaxhighlight>

== Tips & notes ==
* Box size and colours are hard-coded (same as [[Template:Skill]]); only <code>name</code> and <code>description</code> are editable.
* Empty <code>name</code> = nothing rendered; empty <code>description</code> = the tooltip falls back to "Hover for description".
* The tooltip opens to the right of the box — don't place a SkillHover hard against the right page margin or the tooltip may be clipped.
* Related: [[Template:Skill]] (same box, no tooltip) and [[Template:ImageTooltip]] (image-based hover node used in the live [[Skill Tree]] data templates).

Template:SkillHover/doc - Revision history

Willow: the mass documenting