Chase/Sandbox/Tooltips Project

< Chase‎ | Sandbox

In general there are three different sections we'll have to work on: Traits, Skills, and Items. Traits are simply what we see in the hero screen, the hexagon icons that need to be labelled with a tooltip. Skills include all weapon skills, healing, utility, and elite skills. Items are for gear, stat amulets, runes, sigils, food, etc. These three categories should cover everything we need on this website, but we can always add more later.

With those three sections we have a naming pattern in our template namespace.

  • Traits: "Template:Trait/Mesmer/3/X" points to the major trait, 10, for Mesmers in the third line.
  • Skills: "Template:Skills/Elementalist/Dragon's Tooth" is for the skill, Dragon's Tooth; we separate skills by class/profession. There are some skills that are duplicates on the same class, though. For instance: Flanking Strike on Thief; there is an S/D dual skill and an underwater spear skill. In that case, separation via "Template:Skills/Thief/Flanking Strike (Dual wield)" & "Template:Skills/Thief/Flanking Strike (Spear)" is recommended. These few skills are used on the backend by the developers, so it's not a big issues. If you don't know how to split it, just ask here or have someone else do it. I will work on a list of duplicates to minimize confusion.
  • Items: "Template:Items/Food/Dragon's Breath Bun" displays the food item for +200 power and +70 ferocity. This section is broken up via Food, Sigil, Rune, Gear, and PvP.

If there is any other "thing" that isn't encapsulated by the above, please let me know here so I can incorporate it. I know there are some things that I'd like to capture like evade, swap weapon, drop bundle, etc which I think we'll put into the Skills tree under General as such: "Template:Skills/General/Drop Bundle". I can't imagine what else we're missing, so, once again, please let me know (I'm only human xP).

I think the easiest way to do this is with the Sublime Text editor which is free and extremely powerful. Available to Windows and Mac. The main feature we'll use is the Ctrl+D or Cmd+D which highlights all instances of a copied phrase and allows for mass editing much more easily than a normal text editor would. I highly recommend it, but it's not required. You can get it here. In the following examples you'll be asked to change "VARIABLE" into another word, you can copy the first instance and hit the duplicate hotkey in sublime text to change all of them at once. An example of multiple selection editing is shown on the main page there.

Traits[edit]

This section is already created and started. The problem is now we have to include some extra lines of code to get it working. As you may remember from last time we split them via "Trait/<Profession>/<#>/" and then at the end by either Minor-Adept, Minor-Master, and Minor-Grandmaster or by I, II, III, ..., XI, XII, XIII.

Minor[edit]

Under the minor traits you'll see code such as:

  Editing Template:Trait/Guardian/1/Minor-Adept

  <div class="Hexagon-Trait Traits-Guardian-Minor">[[File:Guardian-minor-trait.png|36px|link=gw2:Zealot's Speed|Zealot's Speed]]</div>

Which needs to be changed to:

Editing Template:Trait/Guardian/1/Minor-Adept

<div class="Hexagon-Trait Traits-Guardian-Minor mbhi">
     {{#if: {{{size|}}} | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">Zealot's Speed</span> | {{#if: {{{label|}}} | [[File:Guardian-minor-trait.png|{{{size}}}px|link=gw2:Zealot's Speed|Zealot's Speed]] <span class="label">Zealot's Speed</span> | [[File:Guardian-minor-trait.png|{{{size}}}px|link=gw2:Zealot's Speed|Zealot's Speed]] }} }}</div> | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">Zealot's Speed</span> | {{#if: {{{label|}}} | [[File:Guardian-minor-trait.png|22px|link=gw2:Zealot's Speed|Zealot's Speed]] <span class="label">Zealot's Speed</span> | [[File:Guardian-minor-trait.png|36px|link=gw2:Zealot's Speed|Zealot's Speed]] }} }}</div>}}
     <div class="mbinfo">
         <div class="mbinfo-main">
             <div class="title">
                 <div class="title-details">
                     <div><span>{{#if: {{{cd|}}} | {{{cd}}} | 30}}</span>[[File:Recharge.png|14px|14px]]</div>
                 </div>
                 <div class="title-name">Zealot's Speed</div>
                 <div class="clear"></div>
             </div>
             <div class="clear"></div>
             <div class="desc">Create a Symbol of Wrath when you are struck while below the health threshold.
                 <div class="desc-det">
                     <div>[[File:Radius.png|32px|32px]]<span data-type="radius">Health Threshold: 50%</span></div>
                 </div>
             </div>
         </div>
         <div class="mbinfo-ext">

         </div>
     </div>
 </div>

A huge change. Let's walk through it.

  1. Take these 'variables' from the first box; what's currently written on the page:
  • Guardian-minor-trait.png
  • gw2:Zealot's Speed|Zealot's Speed
  1. Go to either gw2skills.net or the game
  • Check for any recharges or activation times on the skill, note them down or keep them in mind
  1. Copy paste the template below, you'll be replacing many of these values
  • Change the first line Traits-Profession-Minor to whatever profession it should be (i.e. Traits-Guardian-Minor)
  • Change the NAME to whatever the traits name is (There are 12 total changes here)
  • Change the PROFESSION to whatever it should be (i.e. Guardian) in File:PROFESSION-minor-trait.png (4 changes here)
  • Now remember if there were any activation/recharge times
  • If there is an activation time, change ACTIVATION to that number, otherwise delete this line
  • If there is a cooldown on the trait, change RECHARGE to that number, otherwise delete this line
  • Reference for fractions here:
  • To write one-quarter, copy paste this "¼"
  • To write one-half, copy paste this "½"
  • To write three-quarters, copy paste this "¾"
  • Change DESCRIPTION to whatever is written in white on gw2skills or in game (you can also use the wiki for this, to copy paste it)
  • Change / Delete any lines that pertain to the icons below the description (Remember to re-arrange them too)
  • Symbol reference: Match the icon and paste the information inside DETAILS
  • Damage.png Damage
  • Range.png Range
  • Radius.png Radius
  • Heal.png Heal
  • Book.png Book
  • Duration.png Duration
  • Combo.png Combo
  • Stun-Break.png Stun-Break
  • Float.png Float
  • Daze.png Daze
  • Stun.png Stun
  • Knockback.png Knockback
  • Knockdown.png Knockdown
  • Sink.png Sink
  • Launch.png Launch
  • Stealth.png Stealth
  • Torment.png Torment
  • Confusion.png Confusion
  • Fear.png Fear
  • Weakness.png Weakness
  • Vulnerability.png Vulnerability
  • Burn.png Burn
  • Bleed.png Bleed
  • Immobilize.png Immobilize
  • Poison.png Poison
  • Chill.png Chill
  • Cripple.png Cripple
  • Blind.png Blind
  • Invulnerability.png Invulnerability
  • Might.png Might
  • Regeneration.png Regeneration
  • Aegis.png Aegis
  • Retaliation.png Retaliation
  • Swiftness.png Swiftness
  • Vigor.png Vigor
  • Fury.png Fury
  • Protection.png Protection
  • Stability.png Stability
  • Save

The preview screen will not show the hover tooltip, to test it you'll have to save the page. This is a small inconvenience, but please do make sure you did it correctly after saving the page. If it helps you save time, feel free to copy paste whatever you changed the template to, as it will be mostly the same across the same profession. Just be sure to change what needs to be changed properly. Be sure to check it out in an actual trait table as well on a build page to see it in action :)

There are some traits that affect other trait descriptions. Don't worry about this for now. Just do what feels right, we can always change and fix things later too.

<div class="Hexagon-Trait Traits-Profession-Minor mbhi">
     {{#if: {{{size|}}} | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">NAME</span> | {{#if: {{{label|}}} | [[File:PROFESSION-minor-trait.png|{{{size}}}px|link=gw2:NAME|NAME]] <span class="label">NAME</span> | [[File:PROFESSION-minor-trait.png|{{{size}}}px|link=gw2:NAME|NAME]] }} }}</div> | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">NAME</span> | {{#if: {{{label|}}} | [[File:PROFESSION-minor-trait.png|22px|link=gw2:NAME|NAME]] <span class="label">NAME</span> | [[File:PROFESSION-minor-trait.png|36px|link=gw2:NAME|NAME]] }} }}</div>}}
     <div class="mbinfo">
         <div class="mbinfo-main">
             <div class="title">
                 <div class="title-details">
                     <div><span>{{#if: {{{at|}}} | {{{at}}} | ACTIVATION}}</span>[[File:Activation.png|14px|14px]]</div>
                     <div><span>{{#if: {{{cd|}}} | {{{cd}}} | RECHARGE}}</span>[[File:Recharge.png|14px|14px]]</div>
                 </div>
                 <div class="title-name">NAME</div>
                 <div class="clear"></div>
             </div>
             <div class="clear"></div>
             <div class="desc">DESCRIPTION
                 <div class="desc-det">
                     <div>[[File:Damage.png|32px]]<span data-type="Damage">DETAILS</span></div>
                     <div>[[File:Range.png|32px]]<span data-type="Range">DETAILS</span></div>
                     <div>[[File:Radius.png|32px]]<span data-type="Radius">DETAILS</span></div>
                     <div>[[File:Heal.png|32px]]<span data-type="Heal">DETAILS</span></div>
                     <div>[[File:Book.png|32px]]<span data-type="Book">DETAILS</span></div>
                     <div>[[File:Duration.png|32px]]<span data-type="Duration">DETAILS</span></div>
                     <div>[[File:Combo.png|32px]]<span data-type="Combo">DETAILS</span></div>
                     <div>[[File:Stun-Break.png|32px]]<span data-type="Stun-Break">DETAILS</span></div>
                     <div>[[File:Float.png|32px]]<span data-type="Float">DETAILS</span></div>
                     <div>[[File:Daze.png|32px]]<span data-type="Daze">DETAILS</span></div>
                     <div>[[File:Stun.png|32px]]<span data-type="Stun">DETAILS</span></div>
                     <div>[[File:Knockback.png|32px]]<span data-type="Knockback">DETAILS</span></div>
                     <div>[[File:Knockdown.png|32px]]<span data-type="Knockdown">DETAILS</span></div>
                     <div>[[File:Sink.png|32px]]<span data-type="Sink">DETAILS</span></div>
                     <div>[[File:Launch.png|32px]]<span data-type="Launch">DETAILS</span></div>
                     <div>[[File:Stealth.png|32px]]<span data-type="Stealth">DETAILS</span></div>
                     <div>[[File:Torment.png|32px]]<span data-type="Torment">DETAILS</span></div>
                     <div>[[File:Confusion.png|32px]]<span data-type="Confusion">DETAILS</span></div>
                     <div>[[File:Fear.png|32px]]<span data-type="Fear">DETAILS</span></div>
                     <div>[[File:Weakness.png|32px]]<span data-type="Weakness">DETAILS</span></div>
                     <div>[[File:Vulnerability.png|32px]]<span data-type="Vulnerability">DETAILS</span></div>
                     <div>[[File:Burn.png|32px]]<span data-type="Burn">DETAILS</span></div>
                     <div>[[File:Bleed.png|32px]]<span data-type="Bleed">DETAILS</span></div>
                     <div>[[File:Immobilize.png|32px]]<span data-type="Immobilize">DETAILS</span></div>
                     <div>[[File:Poison.png|32px]]<span data-type="Poison">DETAILS</span></div>
                     <div>[[File:Chill.png|32px]]<span data-type="Chill">DETAILS</span></div>
                     <div>[[File:Cripple.png|32px]]<span data-type="Cripple">DETAILS</span></div>
                     <div>[[File:Blind.png|32px]]<span data-type="Blind">DETAILS</span></div>
                     <div>[[File:Invulnerability.png|32px]]<span data-type="Invulnerability">DETAILS</span></div>
                     <div>[[File:Might.png|32px]]<span data-type="Might">DETAILS</span></div>
                     <div>[[File:Regeneration.png|32px]]<span data-type="Regeneration">DETAILS</span></div>
                     <div>[[File:Aegis.png|32px]]<span data-type="Aegis">DETAILS</span></div>
                     <div>[[File:Retaliation.png|32px]]<span data-type="Retaliation">DETAILS</span></div>
                     <div>[[File:Swiftness.png|32px]]<span data-type="Swiftness">DETAILS</span></div>
                     <div>[[File:Vigor.png|32px]]<span data-type="Vigor">DETAILS</span></div>
                     <div>[[File:Fury.png|32px]]<span data-type="Fury">DETAILS</span></div>
                     <div>[[File:Protection.png|32px]]<span data-type="Protection">DETAILS</span></div>
                     <div>[[File:Stability.png|32px]]<span data-type="Stability">DETAILS</span></div>
                 </div>
             </div>
         </div>
         <div class="mbinfo-ext">

         </div>
     </div>
 </div>

And that's everything............ For just minor-traits! OMG WHAT???? Haha, like I said this is an extremely long process, and we shouldn't try to get this done any time immediately. Just take it easy, and perhaps even just focus on the major traits, because people probably want to see that more importantly. That's the next section, doing major traits:

Major[edit]

Under the major traits you'll see code such as:

  Editing Template:Trait/Guardian/1/VII

  <div class="Hexagon-Trait Traits-Guardian-Master">[[File:Trait VII.png|48px|link=gw2:Zealous Blade|Zealous Blade]]</div>

Which needs to be changed to:

Editing Template:Trait/Guardian/1/VII

<div class="Hexagon-Trait Traits-Guardian-Master mbhi">
     {{#if: {{{size|}}} | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">Zealous Blade</span> | {{#if: {{{label|}}} | [[File:Trait VII.png|{{{size}}}px|link=gw2:Zealous Blade|Zealous Blade]] <span class="label">Zealous Blade</span> | [[File:Trait VII.png|{{{size}}}px|link=gw2:Zealous Blade|Zealous Blade]] }} }}</div> | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">Zealous Blade</span> | {{#if: {{{label|}}} | [[File:Trait VII.png|22px|link=gw2:Zealous Blade|Zealous Blade]] <span class="label">Zealous Blade</span> | [[File:Trait VII.png|48px|link=gw2:Zealous Blade|Zealous Blade]] }} }}</div>}}
     <div class="mbinfo">
         <div class="mbinfo-main">
             <div class="title">
                 <div class="title-details">

                 </div>
                 <div class="title-name">Zealous Blade</div>
                 <div class="clear"></div>
             </div>
             <div class="clear"></div>
             <div class="desc">Attacks with your greatsword deal an extra 5% damage and heal you.
                 <div class="desc-det">
                     <div>[[File:Damage.png|32px|32px]]<span data-type="Damage">Damage increase: 5%</span></div>
                     <div>[[File:Heal.png|32px|32px]]<span data-type="Heal">Healing: 25 (0.02)</span></div>
                 </div>
             </div>
         </div>
         <div class="mbinfo-ext">

         </div>
     </div>
 </div>

Again let's walk through it, but it should be a bit more familiar this time.

  1. Take these 'variables' from the first box; what's currently written on the page:
  • gw2:Zealous Blade|Zealous Blade
  1. Go to either gw2skills.net or the game
  • Check for any recharges or activation times on the skill, note them down or keep them in mind
  1. Copy paste the template below, you'll be replacing many of these values
  • Change the first line Traits-Profession-Minor to whatever profession it should be (i.e. Traits-Guardian-Master)
  • Change the NAME to whatever the traits name is (There are 12 total changes here)
  • Change the # in "File:Trait #.png" to whatever roman numeral it is, that is: File:Trait VII.png (4 changes here)
  • Now remember if there were any activation/recharge times
  • If there is an activation time, change ACTIVATION to that number, otherwise delete this line
  • If there is a cooldown on the trait, change RECHARGE to that number, otherwise delete this line
  • Reference for fractions here:
  • To write one-quarter, copy paste this "¼"
  • To write one-half, copy paste this "½"
  • To write three-quarters, copy paste this "¾"
  • Change DESCRIPTION to whatever is written in white on gw2skills or in game (you can also use the wiki for this, to copy paste it)
  • Change / Delete any lines that pertain to the icons below the description (Remember to re-arrange them too)
  • Symbol reference: Match the icon and paste the information inside DETAILS
  • Damage.png Damage
  • Range.png Range
  • Radius.png Radius
  • Heal.png Heal
  • Book.png Book
  • Duration.png Duration
  • Combo.png Combo
  • Stun-Break.png Stun-Break
  • Float.png Float
  • Daze.png Daze
  • Stun.png Stun
  • Knockback.png Knockback
  • Knockdown.png Knockdown
  • Sink.png Sink
  • Launch.png Launch
  • Stealth.png Stealth
  • Torment.png Torment
  • Confusion.png Confusion
  • Fear.png Fear
  • Weakness.png Weakness
  • Vulnerability.png Vulnerability
  • Burn.png Burn
  • Bleed.png Bleed
  • Immobilize.png Immobilize
  • Poison.png Poison
  • Chill.png Chill
  • Cripple.png Cripple
  • Blind.png Blind
  • Invulnerability.png Invulnerability
  • Might.png Might
  • Regeneration.png Regeneration
  • Aegis.png Aegis
  • Retaliation.png Retaliation
  • Swiftness.png Swiftness
  • Vigor.png Vigor
  • Fury.png Fury
  • Protection.png Protection
  • Stability.png Stability
  • Save

The preview screen will not show the hover tooltip, to test it you'll have to save the page. This is a small inconvenience, but please do make sure you did it correctly after saving the page. If it helps you save time, feel free to copy paste whatever you changed the template to, as it will be mostly the same across the same profession. Just be sure to change what needs to be changed properly. Be sure to check it out in an actual trait table as well on a build page to see it in action :)

There are some traits that affect other trait descriptions. Don't worry about this for now. Just do what feels right, we can always change and fix things later too.

<div class="Hexagon-Trait Traits-Profession-Master mbhi">
     {{#if: {{{size|}}} | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">NAME</span> | {{#if: {{{label|}}} | [[File:Trait #.png|{{{size}}}px|link=gw2:NAME|NAME]] <span class="label">NAME</span> | [[File:Trait #.png|{{{size}}}px|link=gw2:NAME|NAME]] }} }}</div> | <div class="mbhoveron">{{#if: {{{textonly|}}} | <span class="label">NAME</span> | {{#if: {{{label|}}} | [[File:Trait #.png|22px|link=gw2:NAME|NAME]] <span class="label">NAME</span> | [[File:Trait #.png|48px|link=gw2:NAME|NAME]] }} }}</div>}}
     <div class="mbinfo">
         <div class="mbinfo-main">
             <div class="title">
                 <div class="title-details">
                     <div><span>{{#if: {{{at|}}} | {{{at}}} | ACTIVATION}}</span>[[File:Activation.png|14px|14px]]</div>
                     <div><span>{{#if: {{{cd|}}} | {{{cd}}} | RECHARGE}}</span>[[File:Recharge.png|14px|14px]]</div>
                 </div>
                 <div class="title-name">NAME</div>
                 <div class="clear"></div>
             </div>
             <div class="clear"></div>
             <div class="desc">DESCRIPTION
                 <div class="desc-det">
                     <div>[[File:Damage.png|32px]]<span data-type="Damage">DETAILS</span></div>
                     <div>[[File:Range.png|32px]]<span data-type="Range">DETAILS</span></div>
                     <div>[[File:Radius.png|32px]]<span data-type="Radius">DETAILS</span></div>
                     <div>[[File:Heal.png|32px]]<span data-type="Heal">DETAILS</span></div>
                     <div>[[File:Book.png|32px]]<span data-type="Book">DETAILS</span></div>
                     <div>[[File:Duration.png|32px]]<span data-type="Duration">DETAILS</span></div>
                     <div>[[File:Combo.png|32px]]<span data-type="Combo">DETAILS</span></div>
                     <div>[[File:Stun-Break.png|32px]]<span data-type="Stun-Break">DETAILS</span></div>
                     <div>[[File:Float.png|32px]]<span data-type="Float">DETAILS</span></div>
                     <div>[[File:Daze.png|32px]]<span data-type="Daze">DETAILS</span></div>
                     <div>[[File:Stun.png|32px]]<span data-type="Stun">DETAILS</span></div>
                     <div>[[File:Knockback.png|32px]]<span data-type="Knockback">DETAILS</span></div>
                     <div>[[File:Knockdown.png|32px]]<span data-type="Knockdown">DETAILS</span></div>
                     <div>[[File:Sink.png|32px]]<span data-type="Sink">DETAILS</span></div>
                     <div>[[File:Launch.png|32px]]<span data-type="Launch">DETAILS</span></div>
                     <div>[[File:Stealth.png|32px]]<span data-type="Stealth">DETAILS</span></div>
                     <div>[[File:Torment.png|32px]]<span data-type="Torment">DETAILS</span></div>
                     <div>[[File:Confusion.png|32px]]<span data-type="Confusion">DETAILS</span></div>
                     <div>[[File:Fear.png|32px]]<span data-type="Fear">DETAILS</span></div>
                     <div>[[File:Weakness.png|32px]]<span data-type="Weakness">DETAILS</span></div>
                     <div>[[File:Vulnerability.png|32px]]<span data-type="Vulnerability">DETAILS</span></div>
                     <div>[[File:Burn.png|32px]]<span data-type="Burn">DETAILS</span></div>
                     <div>[[File:Bleed.png|32px]]<span data-type="Bleed">DETAILS</span></div>
                     <div>[[File:Immobilize.png|32px]]<span data-type="Immobilize">DETAILS</span></div>
                     <div>[[File:Poison.png|32px]]<span data-type="Poison">DETAILS</span></div>
                     <div>[[File:Chill.png|32px]]<span data-type="Chill">DETAILS</span></div>
                     <div>[[File:Cripple.png|32px]]<span data-type="Cripple">DETAILS</span></div>
                     <div>[[File:Blind.png|32px]]<span data-type="Blind">DETAILS</span></div>
                     <div>[[File:Invulnerability.png|32px]]<span data-type="Invulnerability">DETAILS</span></div>
                     <div>[[File:Might.png|32px]]<span data-type="Might">DETAILS</span></div>
                     <div>[[File:Regeneration.png|32px]]<span data-type="Regeneration">DETAILS</span></div>
                     <div>[[File:Aegis.png|32px]]<span data-type="Aegis">DETAILS</span></div>
                     <div>[[File:Retaliation.png|32px]]<span data-type="Retaliation">DETAILS</span></div>
                     <div>[[File:Swiftness.png|32px]]<span data-type="Swiftness">DETAILS</span></div>
                     <div>[[File:Vigor.png|32px]]<span data-type="Vigor">DETAILS</span></div>
                     <div>[[File:Fury.png|32px]]<span data-type="Fury">DETAILS</span></div>
                     <div>[[File:Protection.png|32px]]<span data-type="Protection">DETAILS</span></div>
                     <div>[[File:Stability.png|32px]]<span data-type="Stability">DETAILS</span></div>
                 </div>
             </div>
         </div>
         <div class="mbinfo-ext">

         </div>
     </div>
 </div>

Remove ads

Remove all ads across the entire website for only $4.99! Click here for more info.