Current version: v3.
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.
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.
The script uses a specific syntax. Card Names/IDs must be wrapped within these tags:
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.
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.
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.
Here are some examples of tooltips being used:
<a data-name="Flame Swordsman">Flame Swordsman</a>which results in: Flame Swordsman.
<a data-name="Stardust Dragon">Some cards like this</a>which results in: Some cards like this.
<a data-name="55410871">One of the best Blue-Eyes cards</a>which results in: One of the best Blue-Eyes cards.
<a data-name="Viral Infection">Viral Infection</a>which results in: Viral Infection.