Advanced Syntax Random YGOPRODeck

Yu-Gi-Oh! Card Tooltips Guide

Card Tooltip Script

Current version: v3.

We make heavy use of tooltips over at You can see many examples there.

Just add this script tag to the head tag your website. It provides the ability to get card information when hovering over a card name within a specific syntax.

<script src=""></script>

The script requires jQuery to work. If jQuery is not found, it will load jQuery for you.

The script uses our public API for card data.

Tooltip Example

Mobile Tooltip Example


The script uses a specific syntax. Card Names/IDs must be wrapped within these tags: <a data-name=""></a>.

For example, Dark Magician is as follows: <a data-name="Dark Magician">Dark Magician</a>.

The resulting output for the above is: Dark Magician.

You can also pass a Card ID which is the passcode printed on every card!

Black Luster Soldier would be as follows: <a data-name="5405694">Black Luster Soldier</a>.

It only cares about the Name/ID associated with data-name. So something such as <a data-name="Dark Magician">Random Text</a> will still show Dark Magician.

The script will also update the tooltips on the fly and add a hyperlink to the card which will bring you to the database information for the card. So hovering over dark magician will add a hyperlink that leads to: Magician when clicked.

On mobile devices: You must "tap" on the card name to view the thumbnail. Because of this, no hyperlink will be wrapped around the card name. You simply get the tooltip overlay.

Decode Talker Tooltip Example

Closest Matching

With v2 of the tooltip script, we now have added functionality for card name searching if an exact match is not found.

For example, if "Blue-Eyes White Dragon" was previously spelt as "Blue Eyes White Dragon" then it would fail to find a match, the script will now attempt to use find the closet match to this.


  • <a data-name="Blue Eyes White Dragon">Blue Eyes White Dragon</a> which results in: Blue Eyes White Dragon.
  • <a data-name="Moralltach">Moralltach</a> which results in: Moralltach.
  • <a data-name="Face Turn">Face Turn</a> which results in: Face Turn.
  • <a data-name="Samurai Kabuto">Samurai Kabuto</a> which results in: Samurai Kabuto.

Card Errors

If a card is not found then the script should correctly error handle it.

For example, if you used the following code: <a data-name="Dank Magician XYZ Armored Dragon Core of the Night">Dark Magician</a> then it should show a tooltip with the error since the card name is incomprehensible.

Example of Tooltip Error


Here are some examples of tooltips being used: