Dungeon Boss Wiki
Advertisement

How to use the Tooltip template

This teplate creates a advanced tooltip. It a wrapper that sets the required HTML attributes. Then it uses the following templates:

These templates contain the design (markup) of the tooltip and are called by this template with the needed arg.

The Tooltip template contains the HTML code (a simple <span> tag) to generate the tooltip.

Args

{{Tooltip|<keyword>|<param>|<text>}}

arg 1 (keyword)
is the type of the tooltip. Supported types are: hero, ability, skin, rune, effect, evo (MediaWiki:Common.js)
arg 2 (param)
the data to be fetched depending on arg 1 (e.g. tsume for arg1=hero)
arg 3 (text)
the text that should show the tooltip. Wiki markup can be used.

Example

{{Tooltip|hero|tsume|This is Tsume! HOVER mouse HERE!}} 

displays: This is Tsume! HOVER mouse HERE!

(You should see:

Demon WarriorTsume.pngNature.png Gold, Male
Tsume
Abilities
Swing Icon.png Swing (None)
Soul Shred Icon.png Soul Shred (7)
Double Chop Icon.png Double Chop (4)
Spreading Panic Icon.png Spreading Panic (5)
Epic
Howling Saber.png Howling Saber
Traits
Magical Icon.png Magical
Savage Fury Icon.png Savage Fury
Spirit of Nature Icon.png Spirit of Nature
Vicious Icon.png Vicious

which is the {{Tooltip/Hero|tsume}} template call)

How it works

The tooltip is created by w:c:Dev:Tooltips. The needed imports are done in MediaWiki:Common.js via MediaWiki:ImportJS.

More Tooltips

The following tooltip cannot be created by this template because the needed parameters "data-...." differ.

TODO: Make a Template for these two :)

Sandbox Tooltip

But a tooltip can be created with the following code. This template does that for the others, above mentioned templates.

<span class="sandbox-tooltip" data-v1="It's Thaila!" data-v2="I was here!" data-v7="This is arg7 alias v7">Sandbox-Tooltip test: Who am I?</span>

displays: Sandbox-Tooltip test: Who am I?

Tip Tooltip

<span class="tip-tooltip" data-text="This is the text" data-heading="Heading" data-image="Swing Icon.png|x25px">Tip-Tooltip test</span>

displays: Tip-Tooltip test

Advertisement