MTG Tooltip JS

What is this?

MTG Tooltip Js is a plain javascript plugin that creates tooltips of magic the gathering cards when the mouse is over the selected element.

You can select a specific set to be shown (shocklands, fastlands, painlands and basic lands have also specific options for them), see options for the configurations available, you can also specify image to some cards that are not available on gatherer.

It's pretty fast to start using it. Check the quick start or the examples to see it live.

How to use

You need to download or link to the minified or pretiffied version.

 <script src="./mtgtooltip.min.js"></script>

Then to each element you want to give the class mtgtooltip (you can also specify the class you want to use - see options).

I always liked <span class='mtgtooltip'>Sliver Queen</span> since i've started playing in 2000.

After that just create a new instance of mtgtooltips in javascript with your desired options and its done.

document.addEventListener('DOMContentLoaded', function () { tooltips = new mtgTooltip(); }); 

Options

You have this options available when starting an instance of mtgtooltip.js:

Also it has this api access:

 
//starts, only used to rescan the page and load new items or when start is set to false 
mtgtooltip.start();
// to remove all instances of the tooltip and EventListeners
mtgtooltip.kill(); 

And when identifying an element you can use the default value of the inner contents:

<span class='mtgtooltip' >Tarmogoyf</span>

Attribute the multiverseid from gatherer, it will ignore the content

<span class='mtgtooltip' data-multiverseid='4562'>Tarmogoyf</span>

Attribute with the setname (use the gatherer 2/3 word setname definition)

<span class='mtgtooltip' data-set='ZEN'>Arid Mesa</span>

Attribute with the name (in case you want to surprise someone)

<span class='mtgtooltip' data-name="urza's mine">No one wants to play against this</span>

Attribute with image name to use your special image (don't forget to include the url when creating the mtg tooltip instance)

<span class='mtgtooltip' data-specialimg="myimage.jpg">My altered Baneslayer Angel</span>

Quick start

Its really simple to get it going with the minimal code.

You just need to load this javascript (even hosted on github) and have at least one elment with the mtgtooltip class.

<script src='https://raw.githubusercontent.com/giventofly/MTG-Tooltip-Js/mtgtooltip.min.js'></script>

document.addEventListener('DOMContentLoaded', function () { tooltips = new mtgTooltip(); }); 

Examples

Normal usage, with default options:

<style> .mtgtooltip { color: goldenrod; } </style>

<p>I used to be better that them all, I am <span class='mtgtooltip'>Jace, the mind sculptor</span></p>

document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip(); });

I used to be better that them all, I am Jace, the mind sculptor

Lazyload off, fadetime of 2s (2000ms) and set defined for modern masters:

<style> .mtgtooltip { color: goldenrod; } </style>

<p>I'm a really expensive <span data-set='mma' class='mtgtooltip'>Tarmogoyf</span></p>

document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ "lazyload": false, "fadetime": "2000" }); });

I'm a really expensive Tarmogoyf

Opacity 0.8, myclass set to 'justaexample' using multiverse id

<style> .justaexample { color: red; } </style>

<p>How will i be? I don't know, <span class='justaexample' data-multiverseid='1789'> put a random number</span></p>

document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ "opacity": 0.8, myclass: "justaexample" }); });

How will i be? I don't know, put a random number

wrappers and name set by attribute

<style> .mtgtooltip { color: goldenrod; } .mynewclass { background-color: #ccc; padding: 15px; } </style>

<p>How will i be? I don't know, <span class='justaexample' data-multiverseid='1789'> put a random number</span></p>

document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ wrap_in : "<div class='mynewclass'>", wrap_out : "</div>" }); });

Can you help me? free me!!

Special image attribute, the data attribute is specialimg and the option is specialImage.

<style> .mtgtooltip { color: goldenrod; } </style>

<p>Will <span class='mtgtooltip5' data-specialimg='sliver.jpg'>I ever</span> be printed?</p>

document.addEventListener('DOMContentLoaded', function () { var example = new mtgTooltip({ specialImage : './assets/' }); });

Will I ever be printed?

You can attach to anything that has the specified class

<img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="220451"></p>

document.addEventListener('DOMContentLoaded', function () { var example = new mtgTooltip({}); });

Download

You can check the Github page for the links of the normal version (12.7Kb) or minified (6.9Kb) with babel js, preset es2016, es2015, minify and >2% browsers.

Support

If you want to improve feel free to open a pull request. Are you searching for help? You can contact me also, i might/can be able to give you a hand.

You want to support me? Nice you can have here my paypal.me. Or i would be very happy if you talk and spread this plugin!