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 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.
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.
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.