Javascript Card Popups

What is it?

The Card Hover javascript is a tool for website owners, so that they can include card like the one to the right on mouseover.

How Do I Use It?

Getting the mouseovers to work is fairly straightforward, first - add the following snippet between your <head> and </head> tags:

<script src=""></script>

Next, you link to a HEX Wiki card like and use the class 'hex-card', like so:

<a class="hex-card" href="">Phoenix Guard Aeronaut</a>

Now, when someone mouses over your link, you get Phoenix Guard Aeronaut.

Other Uses

You should be able to add this to your site's forums relatively easily. 

For a phpBB site (from

You should be able to get [hexcard]{TEXT}[/hexcard] to work by adding [hexcard] to your custom BBCode entries with the HTML: <a href="{TEXT}" class="hex-card">{TEXT}</a> so long as you also add the <script> snippet from above to your style's overall_header.html. Then you just use [hexcard]Card Name[/hexcard] and you're away.

You can even get fancier and do something like [hexcard={TEXT1}]{TEXT2}[/hexcard] for <a href="{TEXT1}" class="hex-card">{TEXT2}</a> - which I think will let you do [hexcard=Sabotage]this is a weird card[/hexcard] (though, waiting to get some feedback on this).

Where URL is a link to the card in the wiki and text is whatever you'd like.

For a vBulletin site (from

Set tag to hexcard, replacement to <a href="{param}" class="hex-card">{param}</a> to get [hexcard]Cardname[/hexcard]. If you turn on Use Option‚Äč you should be able to set up <a href="{option}" class="hex-card">{param}</a> in order to make [hexcard=Sabotage]this is a link to Sabotage[/hexcard] work.

If you do get it working on your forum, please tell me how you did it in the comments so I can amend these instructions - I've built them largely from the documentation.

Something doesn't work!

The tool is currently under active development, if you need further help, please let me knowI've turned off comments below because disqus was messing with the popups (the popup code loads itself as late as possible, so as not to slow down your pages - so popups were only working after comments loaded); but if you're using it anywhere, have ideas or any other feedback - please post over here. I'm also on twitter as @HexMetrics, and in the IRC channel (or via web at

Something's missing!

Card info is grabbed from the Hex Wiki approximately weekly (I try do an update around the time there's a card reveal); if a card is missing over there - please just take a minute or two to create it and just let me know there's something that needs to go in. If a card isn't missing, that's a big - you should let me know I've screwed up somewhere.

And finally...

A big thank you to Patrigan, wiki editor/administrator extraordinairre, who gave me his blessing to scrape wiki pages, and to the guys at CZE (since it's their card art and their game afterall).