Skip to content

Latest commit

 

History

History
89 lines (61 loc) · 3.3 KB

README.md

File metadata and controls

89 lines (61 loc) · 3.3 KB
Raw

MTG Tooltip Js

A simple vanilla javascript plugin to create images tooltips for magic the gathering cards. No dependencies, no extra css, just a .js file and little bit of html.

You can check it working live here, along with some examples of usage and a "nicier" page. You can also see one example in production at mtgmeta.io.

I was inspired by Inline mtg and tried to do a new version with only vanilla javascript and cut some "fat".

Why should you use this? Here are some (good) reasons:

  • No libraries needed, just good old plain javascript

  • lazyload tooltip images

  • Low size (13kb and 7Kb minified and 2.3Kb gzipped).

  • You can select defaults set for shocklands, painlands, fetchlands, and basics (more can be added, make a pull request or ask me)

  • option to now load/start on mobile (you don't have a mouse to mover over the images/name to see the tooltip)

  • option to remove elements created and rescan the page

  • check them all bellow...

    **

API

mtgtooltip.start(); //starts, only used to rescan the page and load new items or when start is set to false
mtgtooltip.kill() // to remove all instances of the tooltip and addEventListeners.
option default options description
element body String The element you want to append the tooltips to (need to have position defined)
lazyload true bool (true/false) If you want to lazyload the tooltip images.
fadetime 300 integer (ms) If you want the tooltip to fade in X ms
opacity 1 float [0,1] The opacity for the tooltip to have.
log false bool (true/false) Verbose to the console what's going on.
start true bool (true/false) Start mtgtooltip on the instance creation.
wrap_in - String Inicial wrap for the tooltip (div, section, whatever you like)
wrap_out - String Final wrap for the tooltip (div, section, whatever you like)
specialImage - String link to use costumized image on request (for the data-specialimage attribute)
mobile true bool (true/false) Don't start the mtgtooltip on mobile/tablet devices.
basiclands ust String (ust,unh,ugl) unstable, unhinged and unglued respectively
shocklands exp String (old,new,exp) old: (dissension,ravnica), new: gatecrash, return to ravnica, exp: expeditions
fetchlands exp String (old,new,exp) old: zendikar, onslaught, new: modern master 3, khans of tarkir, exp: expeditions
painlands exp String (old,new,exp) old: ice age, apocalypse, new: magic origins, exp: tenth edition, sixth edition

Normal usage:

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

Set name:

<span class='mtgtooltip' data-name="Bloodbraid Elf">i'm freeeee</span>

Set edition:

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

Set multiverseid:

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

Specific image usage

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

Quick Start:

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

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

Upgrades? Suggestions?

Open a issue/pull request or contact me.