ImageTooltip 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.
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
| Parameter | Required? | What it does | Example |
|---|---|---|---|
img |
Optional | One or two file names (with extension) separated by a semicolon ;. The first is the base image; the optional second is shown on hover. Both render at 46px. Omit for a tooltip with no image. |
SpinningQuestion.gif;HoverSpinningQuestion.gif
|
title |
Optional | The heading shown at the top of the tooltip panel (e.g. the skill name). | Ground Zero
|
content |
Optional | The body of the tooltip. Free wikitext/HTML — paragraphs, <span> highlights, <br>, etc. |
<p>Upon activating a shield...</p>
|
How to use
1. Set img to your image file name(s) with extension. For a hover-swap effect, give two names separated by a semicolon: img=Base.gif;Hover.gif. The part before the ; is the resting image; the part after is shown while hovering.
2. For a single static image with no swap, give just one name: img=Base.gif.
3. Put the tooltip heading in title (typically the node/skill name).
4. Put the tooltip body in content. Because it is usually multi-line, place |content= on its own line and write the HTML beneath, closing with }}. The skill trees use <p>...</p> with <span> tags to highlight numbers.
Copy this
{{ImageTooltip
|img=
|title=
|content=
}}Example
Ground Zero
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.
{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Ground Zero
|content=
<p>Upon activating a shield, for <span>5s </span>every time you land from a jump you will deal damage in a <span>4 block radius </span>based on ability tier point.</p>
}}Tips & notes
- The semicolon in
imgis the key syntax:base;hover. With only one name there is simply no hover swap. - Both images must include their extension (
.gif,.png) — 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
SpinningQuestion.gif;HoverSpinningQuestion.gif. - Inside
content, bare<span>tags are styled by the page CSS to highlight values; this is a convention, not a requirement. - Escape apostrophes in
titleas needed in source (the trees use') so they don't interfere with wiki markup. - Related:
{{InlineImage}}(static captioned image) and{{DynamicGifDisplay}}(the hover-driven GIF panel these nodes feed).