Template:SkillHover

{{#if:|

   {{{name}}}

   Hover for description

<script>

 var nodes = document.getElementsByClassName('skill-node');
 Array.prototype.forEach.call(nodes, function(node){
     var box = node.querySelector('div:first-child');
     var tooltip = node.querySelector('.skill-tooltip');
     box.onmouseover = function(){ tooltip.style.visibility='visible'; };
     box.onmouseout  = function(){ tooltip.style.visibility='hidden'; };
 });

</script> |}

Documentation Edit this documentation at Template:SkillHover/doc.

(edit • history • purge)

Template:SkillHover renders a skill-tree node box that reveals a description tooltip to the right when the reader hovers over it.

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: name (the box label) and description (the tooltip text). If name is empty the whole template renders nothing. The hover behaviour is driven by an inline <script> block in the template. On the live wiki the Skill Tree page is built from

nodes inside the per-class data templates instead, so SkillHover documents an alternative text-box node and is not the node type currently used on the live Skill Tree page.

Parameters

Parameter	Required?	What it does	Example
name	Required	The text shown centered inside the node box. If blank or omitted, the template renders nothing.	name=Unyielding Bastion
description	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".	description=Gain +2 defense for 3s when your shield deals damage.

How to use

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

Special-syntax notes: the tooltip is positioned to the right of the box (it appears at left:230px), 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 .skill-node element on the page, so you do not need to add any JavaScript yourself — just place the template. The description may contain wikitext/HTML if you want line breaks or coloured spans.

Copy this

{{SkillHover
|name=
|description=
}}

Example

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

{{#if:Unyielding Bastion|

   Unyielding Bastion

   When your shield deals damage or when you take damage, gain +2 defense for 3s (Max 20)

<script>

 var nodes = document.getElementsByClassName('skill-node');
 Array.prototype.forEach.call(nodes, function(node){
     var box = node.querySelector('div:first-child');
     var tooltip = node.querySelector('.skill-tooltip');
     box.onmouseover = function(){ tooltip.style.visibility='visible'; };
     box.onmouseout  = function(){ tooltip.style.visibility='hidden'; };
 });

</script> |}

Wikitext that produced it:

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

Tips & notes

• Box size and colours are hard-coded (same as Template:Skill); only name and description are editable.
• Empty name = nothing rendered; empty description = 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).