TCGpedia Labs

...because we can!
Internal name: tooltip
Last update: 2019-06-12

Tooltip

Installation and configuration

Installing the plugin is very simple! You just need to add the following script anywhere in your document:

HTML code
  <script type="text/javascript" src="https://api.tcgpedia.org/tooltip/v1/js?a=ACCESS TOKEN"></script>

You must replace the ACCESS TOKEN with a valid token assigned to you by the TCGpedia staff. To request an access token please fill in the form and we will contact you.

In the form, you will be asked for the following information:

  • The URL of the site on which it will be used
  • Average hits/day your website receives
  • Your email address

How to use the service

Basic use of the plugin

The simplest way to use the plugin is to wrap the card name in the following tag:

HTML code Example
  <a href="#" class="tcg-card">Phyrexian Negator</a>
Phyrexian Negator

The plugin will scan your page looking for tags like <a href...>, note that the class attribute must include the value tcg-card, the card name must be the text content of the link.

Using the title attribute to specify the card name

If, for some reasons, you want to display the popup on a text different from the card name, you can specif the exact card name in the title attribute as in the following example:

HTML code Example
  <a href="#" class="tcg-card" title="Fireball">This is a cool card</a>
This is a cool card

Specifying the size of the displayed image

You can choose between three different sizes of the popup image which are small, medium, and large, default is large. To specify it, use the href part of the link as in the following example:

HTML code Example
  <ul>
    <li><a href="#small" class="tcg-card">Serra Angel</a> (small)</li>
    <li><a href="#medium" class="tcg-card">Serra Angel</a> (medium)</li>
    <li><a href="#large" class="tcg-card">Serra Angel</a> (large)</li>
  </ul>

Converting deck lists

You can automagically convert a full decklist using the special class tcg-cardlist, it supports the quantity prefixes "Nx" and "N" (where N is any number).

HTML code Example
  <div class="tcg-cardlist">
    Generic Label: (10)<br />
    ; comments can be introduced 4 Fireball<br />
    # with various characters 42 Fireball<br />
    // and will never be translated 42 Fireball<br />
    Creatures (10):<br />
    4x Phyrexian Negator<br />
    10 Fireball<br />
    2X Tarmogoyf<br />
    SB: 2 Sta Minchia<br />
  </div>
Generic Label: (10)
; comments can be introduced 4 Fireball
# with various characters 42 Fireball
// and will never be translated 42 Fireball
Creatures (10):
4x Phyrexian Negator
10 Fireball
2X Tarmogoyf
SB: 2 Sta Minchia

Additional information and caveats

Double cards, flip cards, etc.

Multi cards are identified by concatenating all the part names with the “//” separator. You can also reference only one part of the card, the tooltip will try to show only the specified part if available, otherwise it will display the whole card or a composite image for double sided cards. Example:

HTML code Example
  <a href="#" class="tcg-card">Delver of Secrets // Insectile Aberration</a><br />
  <a href="#" class="tcg-card">Delver of Secrets</a><br />
  <a href="#" class="tcg-card">Insectile Aberration</a><br />
  <a href="#" class="tcg-card">Release</a>
    (from <a href="#" class="tcg-card">Catch // Release</a>)<br />
Delver of Secrets // Insectile Aberration
Delver of Secrets
Insectile Aberration
Release (from Catch // Release)