Home Advanced Syntax Random YGOPRODeck

Yu-Gi-Oh! Card Tooltips Guide

Card Tooltip Script

We make heavy use of tooltips over at ygoprodeck.com. 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="https://ygoprodeck.com/ygoprodeck.js"></script>

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

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: https://db.ygoprodeck.com/card/?search=Dark 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

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">Dark Magician</a> then it should show a tooltip with the error.

Example of Tooltip Error


Here are some examples of tooltips being used: