Template:ImageTooltip

Documentation Edit this documentation at Template:ImageTooltip/doc.

(edit • history • purge)

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 img is 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 title as 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).